@mui/x-date-pickers 9.11.0 → 9.12.0

package/CHANGELOG.md

@@ -1,5 +1,170 @@
 # 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_

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/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v9.11.0
+ * @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.11.0
+ * @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.11.0",
+  "version": "9.12.0",
   "author": "MUI Team",
   "description": "The community edition of the MUI X Date and Time Picker components.",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "^9.11.0"
+    "@mui/x-internals": "^9.12.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",