@mui/x-date-pickers 9.10.1 → 9.12.0

package/AdapterDayjs/AdapterDayjs.d.mts

@@ -64,6 +64,15 @@ export declare class AdapterDayjs implements MuiPickersAdapter<string> {
    * See https://github.com/iamkun/dayjs/blob/b3624de619d6e734cd0ffdbbd3502185041c1b60/src/plugin/timezone/index.js#L72
    */
   protected adjustOffset: (value: Dayjs) => Dayjs;
+  /**
+   * On dates predating the timezone standardization, IANA falls back on the Local Mean Time of the
+   * location, whose offset is not a round number of minutes (`Asia/Kolkata` is `GMT+05:53:28`).
+   * `dayjs` then moves the day of the month when only the year or the month was meant to change.
+   * `daysInMonth()` is unusable on such a value because it derives from the equally broken
+   * `endOf('month')`, hence computing it on a plain UTC value instead.
+   * See https://github.com/mui/mui-x/issues/23163
+   */
+  private restoreDayOfMonth;
   date: <T extends string | null | undefined>(value?: T, timezone?: PickersTimezone) => DateBuilderReturnType<T>;
   getInvalidDate: () => Dayjs;
   getTimezone: (value: Dayjs) => string;

package/AdapterDayjs/AdapterDayjs.d.ts

@@ -64,6 +64,15 @@ export declare class AdapterDayjs implements MuiPickersAdapter<string> {
    * See https://github.com/iamkun/dayjs/blob/b3624de619d6e734cd0ffdbbd3502185041c1b60/src/plugin/timezone/index.js#L72
    */
   protected adjustOffset: (value: Dayjs) => Dayjs;
+  /**
+   * On dates predating the timezone standardization, IANA falls back on the Local Mean Time of the
+   * location, whose offset is not a round number of minutes (`Asia/Kolkata` is `GMT+05:53:28`).
+   * `dayjs` then moves the day of the month when only the year or the month was meant to change.
+   * `daysInMonth()` is unusable on such a value because it derives from the equally broken
+   * `endOf('month')`, hence computing it on a plain UTC value instead.
+   * See https://github.com/mui/mui-x/issues/23163
+   */
+  private restoreDayOfMonth;
   date: <T extends string | null | undefined>(value?: T, timezone?: PickersTimezone) => DateBuilderReturnType<T>;
   getInvalidDate: () => Dayjs;
   getTimezone: (value: Dayjs) => string;

package/AdapterDayjs/AdapterDayjs.js

@@ -282,6 +282,36 @@ class AdapterDayjs {
     }
     return value;
   };
+
+  /**
+   * On dates predating the timezone standardization, IANA falls back on the Local Mean Time of the
+   * location, whose offset is not a round number of minutes (`Asia/Kolkata` is `GMT+05:53:28`).
+   * `dayjs` then moves the day of the month when only the year or the month was meant to change.
+   * `daysInMonth()` is unusable on such a value because it derives from the equally broken
+   * `endOf('month')`, hence computing it on a plain UTC value instead.
+   * See https://github.com/mui/mui-x/issues/23163
+   */
+  restoreDayOfMonth = (value, reference) => {
+    const timezone = this.getTimezone(value);
+    // `system` and `UTC` values keep an offset that matches their instant, so they are never affected.
+    if (!this.hasUTCPlugin() || timezone === 'system' || timezone === 'UTC') {
+      return value;
+    }
+    const wallClock = _dayjs.default.utc(value.format('YYYY-MM-DDTHH:mm:ss.SSS'));
+
+    // Years above 9999 don't round-trip through the ISO format, and an invalid value formats to
+    // `Invalid Date`. Both would make the comparison below `NaN`.
+    if (!wallClock.isValid()) {
+      return value;
+    }
+
+    // A shorter target month legitimately clamps the day (`Jan 31` + 1 month is `Feb 28`).
+    const expectedDayOfMonth = Math.min(reference.date(), wallClock.daysInMonth());
+    if (value.date() === expectedDayOfMonth) {
+      return value;
+    }
+    return value.set('date', expectedDayOfMonth);
+  };
   date = (value, timezone = 'default') => {
     if (value === null) {
       return null;
@@ -456,10 +486,10 @@ class AdapterDayjs {
     return this.adjustOffset(value.endOf('day'));
   };
   addYears = (value, amount) => {
-    return this.adjustOffset(value.add(amount, 'year'));
+    return this.adjustOffset(this.restoreDayOfMonth(value.add(amount, 'year'), value));
   };
   addMonths = (value, amount) => {
-    return this.adjustOffset(value.add(amount, 'month'));
+    return this.adjustOffset(this.restoreDayOfMonth(value.add(amount, 'month'), value));
   };
   addWeeks = (value, amount) => {
     return this.adjustOffset(value.add(amount, 'week'));
@@ -498,10 +528,10 @@ class AdapterDayjs {
     return value.millisecond();
   };
   setYear = (value, year) => {
-    return this.adjustOffset(value.set('year', year));
+    return this.adjustOffset(this.restoreDayOfMonth(value.set('year', year), value));
   };
   setMonth = (value, month) => {
-    return this.adjustOffset(value.set('month', month));
+    return this.adjustOffset(this.restoreDayOfMonth(value.set('month', month), value));
   };
   setDate = (value, date) => {
     return this.adjustOffset(value.set('date', date));

package/AdapterDayjs/AdapterDayjs.mjs

@@ -273,6 +273,36 @@ export class AdapterDayjs {
     }
     return value;
   };
+
+  /**
+   * On dates predating the timezone standardization, IANA falls back on the Local Mean Time of the
+   * location, whose offset is not a round number of minutes (`Asia/Kolkata` is `GMT+05:53:28`).
+   * `dayjs` then moves the day of the month when only the year or the month was meant to change.
+   * `daysInMonth()` is unusable on such a value because it derives from the equally broken
+   * `endOf('month')`, hence computing it on a plain UTC value instead.
+   * See https://github.com/mui/mui-x/issues/23163
+   */
+  restoreDayOfMonth = (value, reference) => {
+    const timezone = this.getTimezone(value);
+    // `system` and `UTC` values keep an offset that matches their instant, so they are never affected.
+    if (!this.hasUTCPlugin() || timezone === 'system' || timezone === 'UTC') {
+      return value;
+    }
+    const wallClock = dayjs.utc(value.format('YYYY-MM-DDTHH:mm:ss.SSS'));
+
+    // Years above 9999 don't round-trip through the ISO format, and an invalid value formats to
+    // `Invalid Date`. Both would make the comparison below `NaN`.
+    if (!wallClock.isValid()) {
+      return value;
+    }
+
+    // A shorter target month legitimately clamps the day (`Jan 31` + 1 month is `Feb 28`).
+    const expectedDayOfMonth = Math.min(reference.date(), wallClock.daysInMonth());
+    if (value.date() === expectedDayOfMonth) {
+      return value;
+    }
+    return value.set('date', expectedDayOfMonth);
+  };
   date = (value, timezone = 'default') => {
     if (value === null) {
       return null;
@@ -447,10 +477,10 @@ export class AdapterDayjs {
     return this.adjustOffset(value.endOf('day'));
   };
   addYears = (value, amount) => {
-    return this.adjustOffset(value.add(amount, 'year'));
+    return this.adjustOffset(this.restoreDayOfMonth(value.add(amount, 'year'), value));
   };
   addMonths = (value, amount) => {
-    return this.adjustOffset(value.add(amount, 'month'));
+    return this.adjustOffset(this.restoreDayOfMonth(value.add(amount, 'month'), value));
   };
   addWeeks = (value, amount) => {
     return this.adjustOffset(value.add(amount, 'week'));
@@ -489,10 +519,10 @@ export class AdapterDayjs {
     return value.millisecond();
   };
   setYear = (value, year) => {
-    return this.adjustOffset(value.set('year', year));
+    return this.adjustOffset(this.restoreDayOfMonth(value.set('year', year), value));
   };
   setMonth = (value, month) => {
-    return this.adjustOffset(value.set('month', month));
+    return this.adjustOffset(this.restoreDayOfMonth(value.set('month', month), value));
   };
   setDate = (value, date) => {
     return this.adjustOffset(value.set('date', date));

package/CHANGELOG.md

@@ -1,5 +1,288 @@
 # Changelog
 
+## 9.12.0
+
+_Aug 21, 2026_
+
+We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🧮 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
+- ♿️ Improve the accessibility of Data Grid cells and picker day cells
+- 🗓️ Enable multi-resource event creation and editing in the Scheduler
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@Anexus5919, @mustafajw07
+
+The following team members contributed to this release:
+@brijeshb42, @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes, @romgrk, @silviuaavram
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.12.0`
+
+- [DataGrid] Expose `apiRef` on `GridCallbackDetails` for selector access in callbacks (#22973) @michelengelen
+- [DataGrid] Fix header height not updating when `headerFilters` or `columnGroupingModel` change (#23059) @MBilalShafi
+- [DataGrid] Fix unhandled rejection when unmounting mid-autosize (#23319) @JCQuintas
+- [DataGrid] Label the blank `singleSelect` filter option (#23294) @JCQuintas
+- [DataGrid] Stop sending incomplete filter items to the data source (#23303) @JCQuintas
+- [DataGrid] Support the `rowheader` attribute for grid cells (#23340) @silviuaavram
+
+#### `@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')
+
+Same changes as in `@mui/x-data-grid@9.12.0`, plus:
+
+- [DataGridPro] Honor `hasNextPage` in infinite lazy loading (#23048) @MBilalShafi
+
+#### `@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')
+
+Same changes as in `@mui/x-data-grid-pro@9.12.0`, plus:
+
+- [DataGridPremium] Formula support (#22807) @MBilalShafi
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.12.0`
+
+- [fields] Keep the selected section on blank space clicks (#23318) @LukasTy
+- [pickers] Associate the day cells with their week day column header (#23339) @LukasTy
+- [pickers] Keep the `gridcell` role and the column index on filler cells (#23326) @Anexus5919
+
+#### `@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')
+
+Same changes as in `@mui/x-date-pickers@9.12.0`, plus:
+
+- [DateRangeCalendar] Round the range highlight at the month grid edges (#23297) @JCQuintas
+- [DateRangePicker] Keep the range highlight opaque for disabled days (#23317) @JCQuintas
+
+### Charts
+
+#### `@mui/x-charts@9.12.0`
+
+- [charts] Add a demo for label on grid row (#23333) @noraleonte
+- [charts] Fix React 18 `propTypes` warnings and stray-pointer test flakiness (#23384) @LukasTy
+- [charts] Focus the clicked item for keyboard navigation (#23247) @JCQuintas
+
+#### `@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')
+
+Same changes as in `@mui/x-charts@9.12.0`.
+
+#### `@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')
+
+Same changes as in `@mui/x-charts-pro@9.12.0`, plus:
+
+- [charts-premium] Add `onItemClick` to the radial charts (#23253) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@9.12.0`
+
+Internal changes.
+
+#### `@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')
+
+Same changes as in `@mui/x-tree-view@9.12.0`.
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-beta.10`
+
+- [scheduler] Add `onEventEditingStart` to let consumers open their own edit UI (#23361) @rita-codes
+- [scheduler] Fix keyboard and focus issues around the "+N more" popover (#23312) @rita-codes
+- [scheduler] Honor `viewConfig` hour limits in the compact day and week views (#23316) @rita-codes
+- [scheduler] Share timeline event layout data (#23366) @flaviendelangle
+- [scheduler] enable multi-resource event creation and editing (#23313) @mustafajw07
+
+#### `@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')
+
+Same changes as in `@mui/x-scheduler@9.0.0-beta.10`, plus:
+
+- [scheduler-premium] Allow to control the min and max hour in the Event Timeline (#23212) @rita-codes
+- [scheduler-premium] Dependencies - Create, select and delete via terminals (#23200) @rita-codes
+
+### Codemod
+
+#### `@mui/x-codemod@9.12.0`
+
+Internal changes.
+
+### Docs
+
+- [docs][charts] Document line mark size customization (#23370) @JCQuintas
+- [docs] Add recipe for constraining the `make-child` drop action by item type (#22940) @michelengelen
+- [docs] Redirect the renamed Event Timeline views page (#23324) @brijeshb42
+- [docs] Remove unused `adapter-dependencies.json` (#23328) @LukasTy
+
+### Core
+
+- [code-infra] Add release skill (#23308) @brijeshb42
+- [code-infra] Fix changelog categorization of docs and `DateRangeCalendar` tags (#23385) @JCQuintas
+- [code-infra] Sync mui-release skill (#23330) @brijeshb42
+
+### Miscellaneous
+
+- [core] Declare the missing `react-dom` peer dependencies (#23381) @LukasTy
+- [test] Fix act warnings in the data source filter tests (#23360) @JCQuintas
+- [virtualizer] Add inverse-sticky layout (#23053) @romgrk
+
+## 9.11.1
+
+_Aug 6, 2026_
+
+We'd like to extend a big thank you to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐛 Fix the empty `@mui/x-charts-vendor` package published in v9.11.0
+
+The following team members contributed to this release:
+@JCQuintas, @rita-codes
+
+### Charts
+
+#### `@mui/x-charts@9.11.1`
+
+- [charts] Fix empty `@mui/x-charts-vendor` published package (#23310) @JCQuintas
+
+#### `@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')
+
+Same changes as in `@mui/x-charts@9.11.1`.
+
+#### `@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')
+
+Same changes as in `@mui/x-charts-pro@9.11.1`.
+
+#### `@mui/x-charts-vendor@9.11.1`
+
+- [charts] Fix empty `@mui/x-charts-vendor` published package (#23310) @JCQuintas
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-beta.9`
+
+- [scheduler] Show the range validation errors on the End date and End time fields (#23291) @rita-codes
+
+#### `@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')
+
+Same changes as in `@mui/x-scheduler@9.0.0-beta.9`.
+
+## 9.11.0
+
+_Aug 6, 2026_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Add `addItems()` and `getItemSelection()` API methods to Tree View
+
+Special thanks go out to these community members for their valuable contributions:
+@12joan, @Anexus5919, @kevincorizi-sbt, @mixelburg, @mustafajw07, @strazto
+
+The following team members contributed to this release:
+@flaviendelangle, @hasdfa, @JCQuintas, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.11.0`
+
+- [DataGrid] Fix `updateRows` stripping class prototypes from rows in datasource mode (#22288) @mixelburg
+- [DataGrid] Do not re-fetch data when an `Activity` becomes visible (#22603) @12joan
+- [DataGrid] Fix toolbar button stealing focus when a sibling's disabled state changes (#23204) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@9.11.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@9.11.0`.
+
+#### `@mui/x-data-grid-premium@9.11.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@9.11.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.11.0`
+
+- [pickers] Fix day shift when editing dates predating timezone standardization (#23296) @JCQuintas
+
+#### `@mui/x-date-pickers-pro@9.11.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@9.11.0`, plus:
+
+- [DateRangePicker] Fix disabled filler cells showing the range highlight (#23293) @JCQuintas
+
+### Charts
+
+#### `@mui/x-charts@9.11.0`
+
+- [charts] Activate the focused item with `Enter`/`Space` (#23218) @JCQuintas
+- [charts] Extract the axis click payload builders (#23215) @JCQuintas
+- [charts] Fix `GestureManager` event listener leak on chart unmount (#23283) @kevincorizi-sbt
+- [charts] Fix `slotProps.legend.position` and `direction` in `RadarChart` (#23254) @JCQuintas
+- [charts] Fix axis clicks being discarded on slight pointer movement (#23244) @noraleonte
+- [charts] Fix image export of charts sized by their parent element (#23255) @JCQuintas
+- [charts] Forward `experimentalFeatures` on `RadarChart` and `Heatmap` (#23216) @JCQuintas
+- [charts] Hide focus indicator when the chart loses focus (#23213) @JCQuintas
+
+#### `@mui/x-charts-pro@9.11.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@9.11.0`.
+
+#### `@mui/x-charts-premium@9.11.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@9.11.0`, plus:
+
+- [charts-premium] Fix `RangeBar` type override (#23217) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@9.11.0`
+
+- [tree view] Add `addItems()` API method (#23159) @JCQuintas
+- [tree view] Add `getItemSelection` API method (#23257) @noraleonte
+- [tree view] Ignore `keepExistingSelection` when `multiSelect` is `false` (#23242) @JCQuintas
+- [tree view] Prevent duplicate ids in multi-select arrow navigation (#23006) @Anexus5919
+
+#### `@mui/x-tree-view-pro@9.11.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@9.11.0`, plus:
+
+- [tree view] Discard superseded lazy-loading responses (#23005) @Anexus5919
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-beta.8`
+
+- [scheduler] Add `localeText` prop to standalone views (#23210) @rita-codes
+- [scheduler] Finetune touch experience for time grid events and introduce editing drawer (#22624) @noraleonte
+- [scheduler] Introduce the edit dialog form context & lifecycle contract (#23284) @rita-codes
+- [scheduler] Refactor edit dialog General tab into section components (#23206) @rita-codes
+- [scheduler] Replace copied Base UI internals with `@base-ui/react/internals` imports (#21972) @flaviendelangle
+- [scheduler] Hide resource picker when no resources are provided (#23290) @mustafajw07
+- [scheduler] Support multi-resource occurrences in `EventTimeline` (#23240) @mustafajw07
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.8` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-beta.8`.
+
+### Codemod
+
+#### `@mui/x-codemod@9.11.0`
+
+- [codemod] Remove unused `@babel/core` and `@babel/traverse` dependencies (#23245) @LukasTy
+
+### Docs
+
+- [docs] Add recipe for adding new rows from clipboard copy (#22913) @michelengelen
+- [docs] Clarify the package versions in v8 upgrade guides (#22376) @strazto
+- [docs] Replace README peer dependency lists with an npm install command (#23256) @LukasTy
+
+### Core
+
+- [code-infra] Align action pin version comments (#23238) @LukasTy
+
+### Miscellaneous
+
+- [chat] Drop the undeclared `@mui/icons-material` dependency (#23252) @LukasTy
+- [chat] Sanitize image part URLs and share the URL allow-list with markdown (#23058) @hasdfa
+- [test] Type the `PickersTextField` test stub instead of `as any` (#23194) @LukasTy
+
 ## 9.10.1
 
 _Jul 23, 2026_

package/DateCalendar/DayCalendar.js

@@ -262,6 +262,8 @@ function DayCalendar(inProps) {
   const now = (0, _useUtils.useNow)(timezone);
   const classes = useUtilityClasses(classesProp);
   const isRtl = (0, _RtlProvider.useRtl)();
+  // The week number is a `rowheader`, so it takes the first column of the grid.
+  const columnIndexOffset = displayWeekNumber ? 1 : 0;
   const isDateDisabled = (0, _useIsDateDisabled.useIsDateDisabled)({
     shouldDisableDate,
     shouldDisableMonth,
@@ -384,19 +386,24 @@ function DayCalendar(inProps) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickerCalendarDayRoot, {
     role: "grid",
     "aria-labelledby": gridLabelId,
+    "aria-colcount": columnIndexOffset + 7,
+    "aria-rowcount": weeksToDisplay.length + 1,
     className: classes.root,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PickerCalendarDayHeader, {
       role: "row",
+      "aria-rowindex": 1,
       className: classes.header,
       children: [displayWeekNumber && /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerCalendarWeekNumberLabel, {
         variant: "caption",
         role: "columnheader",
+        "aria-colindex": 1,
         "aria-label": translations.calendarWeekNumberHeaderLabel,
         className: classes.weekNumberLabel,
         children: translations.calendarWeekNumberHeaderText
       }), (0, _dateUtils.getWeekdays)(adapter, now).map((weekday, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerCalendarWeekDayLabel, {
         variant: "caption",
         role: "columnheader",
+        "aria-colindex": columnIndexOffset + i + 1,
         "aria-label": adapter.format(weekday, 'weekday'),
         className: classes.weekDayLabel,
         children: dayOfWeekFormatter(weekday)
@@ -419,13 +426,13 @@ function DayCalendar(inProps) {
         children: weeksToDisplay.map((week, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickerCalendarWeek, {
           role: "row",
           className: classes.weekContainer
-          // fix issue of announcing row 1 as row 2
-          // caused by week day labels row
+          // The week day labels row is the first row of the grid.
           ,
-          "aria-rowindex": index + 1,
+          "aria-rowindex": index + 2,
           children: [displayWeekNumber && /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerCalendarWeekNumber, {
             className: classes.weekNumber,
             role: "rowheader",
+            "aria-colindex": 1,
             "aria-label": translations.calendarWeekNumberAriaLabelText(adapter.getWeekNumber(week[0])),
             children: translations.calendarWeekNumberText(adapter.getWeekNumber(week[0]))
           }), week.map((day, dayIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedDay, {
@@ -439,10 +446,8 @@ function DayCalendar(inProps) {
             onBlur: handleBlur,
             onDaySelect: handleDaySelect,
             isDateDisabled: isDateDisabled,
-            currentMonthNumber: currentMonthNumber
-            // fix issue of announcing column 1 as column 2 when `displayWeekNumber` is enabled
-            ,
-            "aria-colindex": dayIndex + 1
+            currentMonthNumber: currentMonthNumber,
+            "aria-colindex": columnIndexOffset + dayIndex + 1
           }, day.toString()))]
         }, `week-${week[0]}`))
       })

package/DateCalendar/DayCalendar.mjs

@@ -255,6 +255,8 @@ export function DayCalendar(inProps) {
   const now = useNow(timezone);
   const classes = useUtilityClasses(classesProp);
   const isRtl = useRtl();
+  // The week number is a `rowheader`, so it takes the first column of the grid.
+  const columnIndexOffset = displayWeekNumber ? 1 : 0;
   const isDateDisabled = useIsDateDisabled({
     shouldDisableDate,
     shouldDisableMonth,
@@ -377,19 +379,24 @@ export function DayCalendar(inProps) {
   return /*#__PURE__*/_jsxs(PickerCalendarDayRoot, {
     role: "grid",
     "aria-labelledby": gridLabelId,
+    "aria-colcount": columnIndexOffset + 7,
+    "aria-rowcount": weeksToDisplay.length + 1,
     className: classes.root,
     children: [/*#__PURE__*/_jsxs(PickerCalendarDayHeader, {
       role: "row",
+      "aria-rowindex": 1,
       className: classes.header,
       children: [displayWeekNumber && /*#__PURE__*/_jsx(PickerCalendarWeekNumberLabel, {
         variant: "caption",
         role: "columnheader",
+        "aria-colindex": 1,
         "aria-label": translations.calendarWeekNumberHeaderLabel,
         className: classes.weekNumberLabel,
         children: translations.calendarWeekNumberHeaderText
       }), getWeekdays(adapter, now).map((weekday, i) => /*#__PURE__*/_jsx(PickerCalendarWeekDayLabel, {
         variant: "caption",
         role: "columnheader",
+        "aria-colindex": columnIndexOffset + i + 1,
         "aria-label": adapter.format(weekday, 'weekday'),
         className: classes.weekDayLabel,
         children: dayOfWeekFormatter(weekday)
@@ -412,13 +419,13 @@ export function DayCalendar(inProps) {
         children: weeksToDisplay.map((week, index) => /*#__PURE__*/_jsxs(PickerCalendarWeek, {
           role: "row",
           className: classes.weekContainer
-          // fix issue of announcing row 1 as row 2
-          // caused by week day labels row
+          // The week day labels row is the first row of the grid.
           ,
-          "aria-rowindex": index + 1,
+          "aria-rowindex": index + 2,
           children: [displayWeekNumber && /*#__PURE__*/_jsx(PickerCalendarWeekNumber, {
             className: classes.weekNumber,
             role: "rowheader",
+            "aria-colindex": 1,
             "aria-label": translations.calendarWeekNumberAriaLabelText(adapter.getWeekNumber(week[0])),
             children: translations.calendarWeekNumberText(adapter.getWeekNumber(week[0]))
           }), week.map((day, dayIndex) => /*#__PURE__*/_jsx(WrappedDay, {
@@ -432,10 +439,8 @@ export function DayCalendar(inProps) {
             onBlur: handleBlur,
             onDaySelect: handleDaySelect,
             isDateDisabled: isDateDisabled,
-            currentMonthNumber: currentMonthNumber
-            // fix issue of announcing column 1 as column 2 when `displayWeekNumber` is enabled
-            ,
-            "aria-colindex": dayIndex + 1
+            currentMonthNumber: currentMonthNumber,
+            "aria-colindex": columnIndexOffset + dayIndex + 1
           }, day.toString()))]
         }, `week-${week[0]}`))
       })

package/DateCalendar/PickersSlideTransition.js

@@ -115,7 +115,9 @@ function PickersSlideTransition(inProps) {
   const classes = useUtilityClasses(classesProp, ownerState);
   const theme = (0, _styles.useTheme)();
   if (reduceAnimations) {
+    // `role="none"` keeps the day rows owned by the calendar grid.
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      role: "none",
       className: (0, _clsx.default)(classes.root, className),
       children: children
     });

package/DateCalendar/PickersSlideTransition.mjs

@@ -107,7 +107,9 @@ export function PickersSlideTransition(inProps) {
   const classes = useUtilityClasses(classesProp, ownerState);
   const theme = useTheme();
   if (reduceAnimations) {
+    // `role="none"` keeps the day rows owned by the calendar grid.
     return /*#__PURE__*/_jsx("div", {
+      role: "none",
       className: clsx(classes.root, className),
       children: children
     });

package/PickerDay/PickerDay.js

@@ -91,6 +91,16 @@ const PickerDayRoot = (0, _styles.styled)(_ButtonBase.default, {
       }
     }
   }, {
+    props: {
+      isDayOutsideMonth: true
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.secondary
+    }
+  },
+  // Must come after `isDayOutsideMonth` so that a disabled day outside the current month
+  // uses the disabled text color.
+  {
     props: {
       isDayDisabled: true
     },
@@ -107,13 +117,6 @@ const PickerDayRoot = (0, _styles.styled)(_ButtonBase.default, {
       opacity: 0,
       pointerEvents: 'none'
     }
-  }, {
-    props: {
-      isDayOutsideMonth: true
-    },
-    style: {
-      color: (theme.vars || theme).palette.text.secondary
-    }
   }, {
     props: {
       isDayCurrent: true,
@@ -205,6 +208,7 @@ const PickerDayRaw = /*#__PURE__*/React.forwardRef(function PickerDay(inProps, f
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerDayRoot, {
       ref: handleRef,
       role: other.role,
+      "aria-colindex": other['aria-colindex'],
       ownerState: ownerState,
       className: (0, _clsx.default)(classes.root, className),
       as: "div"

package/PickerDay/PickerDay.mjs

@@ -84,6 +84,16 @@ const PickerDayRoot = styled(ButtonBase, {
       }
     }
   }, {
+    props: {
+      isDayOutsideMonth: true
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.secondary
+    }
+  },
+  // Must come after `isDayOutsideMonth` so that a disabled day outside the current month
+  // uses the disabled text color.
+  {
     props: {
       isDayDisabled: true
     },
@@ -100,13 +110,6 @@ const PickerDayRoot = styled(ButtonBase, {
       opacity: 0,
       pointerEvents: 'none'
     }
-  }, {
-    props: {
-      isDayOutsideMonth: true
-    },
-    style: {
-      color: (theme.vars || theme).palette.text.secondary
-    }
   }, {
     props: {
       isDayCurrent: true,
@@ -198,6 +201,7 @@ const PickerDayRaw = /*#__PURE__*/React.forwardRef(function PickerDay(inProps, f
     return /*#__PURE__*/_jsx(PickerDayRoot, {
       ref: handleRef,
       role: other.role,
+      "aria-colindex": other['aria-colindex'],
       ownerState: ownerState,
       className: clsx(classes.root, className),
       as: "div"

package/README.md

@@ -8,7 +8,7 @@ It's part of [MUI X](https://mui.com/x/), an open-core extension of our Core li
 Install the package in your project directory with:
 
 ```bash
-npm install @mui/x-date-pickers
+npm install @mui/x-date-pickers @mui/material @emotion/react @emotion/styled
 ```
 
 Then install the date library of your choice (if not already installed).
@@ -33,16 +33,6 @@ npm install luxon
 npm install moment
 ```
 
-This component has the following peer dependencies that you need to install as well.
-
-```json
-"peerDependencies": {
-  "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-},
-```
-
 After completing the installation, you have to set the `dateAdapter` prop of the `LocalizationProvider` accordingly.
 The supported adapters are exported from `@mui/x-date-pickers`.
 

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v9.10.1
+ * @mui/x-date-pickers v9.12.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v9.10.1
+ * @mui/x-date-pickers v9.12.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/hooks/useField/useFieldRootProps.js

@@ -208,18 +208,32 @@ function useFieldRootProps(parameters) {
       return;
     }
     const target = event.target;
-    // `sectionListRoot` is the sections container (a descendant of the
-    // InputBase root that owns this handler). The guard rejects clicks on
-    // sibling adornments (open / clear buttons, etc.) which have their own
-    // behavior and must not get intercepted here.
     const sectionListRoot = domGetters.getRoot();
-    if (!sectionListRoot.contains(target)) {
+    const isInsideSectionList = sectionListRoot.contains(target);
+    // Only the field root is ours outside the sections container: it is the
+    // target of a padding click. The adornments keep their own behavior.
+    if (!isInsideSectionList && target !== event.currentTarget) {
       return;
     }
+    const sectionElement = isInsideSectionList ? target.closest('[data-sectionindex]') : null;
+
+    // Blank space is the field padding and the area past the sections. Mimic
+    // the native date input: first section on entry, keep it afterwards.
+    // `preventDefault` is what keeps it, by stopping both the browser blur and
+    // Chromium's focus delegation.
+    const isBlankSpaceClick = sectionElement == null && (!isInsideSectionList || isPointOutsideSections(sectionListRoot, event.clientX));
+    if (isBlankSpaceClick) {
+      event.preventDefault();
+      if (!focused) {
+        setFocused(true);
+        setSelectedSections(sectionOrder.startIndex);
+      }
+      return;
+    }
+
     // Prefer the visually-containing section (matches Chromium's
     // delegation + section container `onClick`), fall back to the
-    // closest-by-distance section for padding / past-last-section clicks.
-    const sectionElement = target.closest('[data-sectionindex]');
+    // closest-by-distance section for clicks on the container padding.
     const parsedIndex = sectionElement ? Number(sectionElement.dataset.sectionindex) : findClosestSectionIndexToPoint(sectionListRoot, event.clientX);
     // `Number(undefined) === NaN` and `NaN == null === false`, so guard
     // explicitly here even though `data-sectionindex` is set by
@@ -313,6 +327,32 @@ function useFieldRootProps(parameters) {
   };
 }
 
+/**
+ * Slop on each side of the sections, so a click that just misses the outermost
+ * one still selects it. Under half a digit at the default font size.
+ */
+const BLANK_SPACE_TOLERANCE = 4;
+
+/**
+ * Returns `true` when `clientX` sits past the sections on either side.
+ * Horizontal only: a click in the container's vertical padding still belongs to
+ * the section above or below it.
+ */
+function isPointOutsideSections(root, clientX) {
+  const sections = root.querySelectorAll('[data-sectionindex]');
+  if (sections.length === 0) {
+    return false;
+  }
+  let left = Infinity;
+  let right = -Infinity;
+  for (let i = 0; i < sections.length; i += 1) {
+    const rect = sections[i].getBoundingClientRect();
+    left = Math.min(left, rect.left);
+    right = Math.max(right, rect.right);
+  }
+  return clientX < left - BLANK_SPACE_TOLERANCE || clientX > right + BLANK_SPACE_TOLERANCE;
+}
+
 /**
  * Returns the index of the section whose horizontal center is closest to `clientX`.
  * Returns `null` if the field renders no `[role="spinbutton"]` descendants

package/internals/hooks/useField/useFieldRootProps.mjs

@@ -202,18 +202,32 @@ export function useFieldRootProps(parameters) {
       return;
     }
     const target = event.target;
-    // `sectionListRoot` is the sections container (a descendant of the
-    // InputBase root that owns this handler). The guard rejects clicks on
-    // sibling adornments (open / clear buttons, etc.) which have their own
-    // behavior and must not get intercepted here.
     const sectionListRoot = domGetters.getRoot();
-    if (!sectionListRoot.contains(target)) {
+    const isInsideSectionList = sectionListRoot.contains(target);
+    // Only the field root is ours outside the sections container: it is the
+    // target of a padding click. The adornments keep their own behavior.
+    if (!isInsideSectionList && target !== event.currentTarget) {
       return;
     }
+    const sectionElement = isInsideSectionList ? target.closest('[data-sectionindex]') : null;
+
+    // Blank space is the field padding and the area past the sections. Mimic
+    // the native date input: first section on entry, keep it afterwards.
+    // `preventDefault` is what keeps it, by stopping both the browser blur and
+    // Chromium's focus delegation.
+    const isBlankSpaceClick = sectionElement == null && (!isInsideSectionList || isPointOutsideSections(sectionListRoot, event.clientX));
+    if (isBlankSpaceClick) {
+      event.preventDefault();
+      if (!focused) {
+        setFocused(true);
+        setSelectedSections(sectionOrder.startIndex);
+      }
+      return;
+    }
+
     // Prefer the visually-containing section (matches Chromium's
     // delegation + section container `onClick`), fall back to the
-    // closest-by-distance section for padding / past-last-section clicks.
-    const sectionElement = target.closest('[data-sectionindex]');
+    // closest-by-distance section for clicks on the container padding.
     const parsedIndex = sectionElement ? Number(sectionElement.dataset.sectionindex) : findClosestSectionIndexToPoint(sectionListRoot, event.clientX);
     // `Number(undefined) === NaN` and `NaN == null === false`, so guard
     // explicitly here even though `data-sectionindex` is set by
@@ -307,6 +321,32 @@ export function useFieldRootProps(parameters) {
   };
 }
 
+/**
+ * Slop on each side of the sections, so a click that just misses the outermost
+ * one still selects it. Under half a digit at the default font size.
+ */
+const BLANK_SPACE_TOLERANCE = 4;
+
+/**
+ * Returns `true` when `clientX` sits past the sections on either side.
+ * Horizontal only: a click in the container's vertical padding still belongs to
+ * the section above or below it.
+ */
+function isPointOutsideSections(root, clientX) {
+  const sections = root.querySelectorAll('[data-sectionindex]');
+  if (sections.length === 0) {
+    return false;
+  }
+  let left = Infinity;
+  let right = -Infinity;
+  for (let i = 0; i < sections.length; i += 1) {
+    const rect = sections[i].getBoundingClientRect();
+    left = Math.min(left, rect.left);
+    right = Math.max(right, rect.right);
+  }
+  return clientX < left - BLANK_SPACE_TOLERANCE || clientX > right + BLANK_SPACE_TOLERANCE;
+}
+
 /**
  * Returns the index of the section whose horizontal center is closest to `clientX`.
  * Returns `null` if the field renders no `[role="spinbutton"]` descendants

package/internals/hooks/usePickerPrivateContext.d.mts

@@ -1,4 +1,4 @@
 /**
  * Returns the private context passed by the Picker wrapping the current component.
  */
-export declare const usePickerPrivateContext: () => import("../components/PickerProvider.mjs").PickerPrivateContextValue;
+export declare const usePickerPrivateContext: () => import("../index.mjs").PickerPrivateContextValue;

package/internals/hooks/usePickerPrivateContext.d.ts

@@ -1,4 +1,4 @@
 /**
  * Returns the private context passed by the Picker wrapping the current component.
  */
-export declare const usePickerPrivateContext: () => import("../components/PickerProvider.js").PickerPrivateContextValue;
+export declare const usePickerPrivateContext: () => import("../index.js").PickerPrivateContextValue;

package/internals/index.d.mts

@@ -2,8 +2,8 @@ export { PickersArrowSwitcher } from "./components/PickersArrowSwitcher/PickersA
 export type { ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps } from "./components/PickersArrowSwitcher/index.mjs";
 export { PickerFieldUI, PickerFieldUIContextProvider, cleanFieldResponse, useFieldTextFieldProps, PickerFieldUIContext, mergeSlotProps } from "./components/PickerFieldUI.mjs";
 export type { ExportedPickerFieldUIProps, PickerFieldUISlots, PickerFieldUISlotProps, PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "./components/PickerFieldUI.mjs";
-export { PickerProvider } from "./components/PickerProvider.mjs";
-export type { PickerContextValue } from "./components/PickerProvider.mjs";
+export { PickerProvider, PickerPrivateContext } from "./components/PickerProvider.mjs";
+export type { PickerContextValue, PickerPrivateContextValue } from "./components/PickerProvider.mjs";
 export { PickersModalDialog } from "./components/PickersModalDialog.mjs";
 export type { PickersModalDialogSlots, PickersModalDialogSlotProps } from "./components/PickersModalDialog.mjs";
 export { PickerPopper } from "./components/PickerPopper/PickerPopper.mjs";

package/internals/index.d.ts

@@ -2,8 +2,8 @@ export { PickersArrowSwitcher } from "./components/PickersArrowSwitcher/PickersA
 export type { ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps } from "./components/PickersArrowSwitcher/index.js";
 export { PickerFieldUI, PickerFieldUIContextProvider, cleanFieldResponse, useFieldTextFieldProps, PickerFieldUIContext, mergeSlotProps } from "./components/PickerFieldUI.js";
 export type { ExportedPickerFieldUIProps, PickerFieldUISlots, PickerFieldUISlotProps, PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "./components/PickerFieldUI.js";
-export { PickerProvider } from "./components/PickerProvider.js";
-export type { PickerContextValue } from "./components/PickerProvider.js";
+export { PickerProvider, PickerPrivateContext } from "./components/PickerProvider.js";
+export type { PickerContextValue, PickerPrivateContextValue } from "./components/PickerProvider.js";
 export { PickersModalDialog } from "./components/PickersModalDialog.js";
 export type { PickersModalDialogSlots, PickersModalDialogSlotProps } from "./components/PickersModalDialog.js";
 export { PickerPopper } from "./components/PickerPopper/PickerPopper.js";

package/internals/index.js

@@ -75,6 +75,12 @@ Object.defineProperty(exports, "PickerPopper", {
     return _PickerPopper.PickerPopper;
   }
 });
+Object.defineProperty(exports, "PickerPrivateContext", {
+  enumerable: true,
+  get: function () {
+    return _PickerProvider.PickerPrivateContext;
+  }
+});
 Object.defineProperty(exports, "PickerProvider", {
   enumerable: true,
   get: function () {

package/internals/index.mjs

@@ -1,6 +1,6 @@
 export { PickersArrowSwitcher } from "./components/PickersArrowSwitcher/PickersArrowSwitcher.mjs";
 export { PickerFieldUI, PickerFieldUIContextProvider, cleanFieldResponse, useFieldTextFieldProps, PickerFieldUIContext, mergeSlotProps } from "./components/PickerFieldUI.mjs";
-export { PickerProvider } from "./components/PickerProvider.mjs";
+export { PickerProvider, PickerPrivateContext } from "./components/PickerProvider.mjs";
 export { PickersModalDialog } from "./components/PickersModalDialog.mjs";
 export { PickerPopper } from "./components/PickerPopper/PickerPopper.mjs";
 export { pickerPopperClasses } from "./components/PickerPopper/pickerPopperClasses.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "9.10.1",
+  "version": "9.12.0",
   "author": "MUI Team",
   "description": "The community edition of the MUI X Date and Time Picker components.",
   "license": "MIT",
@@ -34,12 +34,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@mui/utils": "^9.2.0",
+    "@mui/utils": "^9.3.0",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "^9.10.1"
+    "@mui/x-internals": "^9.12.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",