@mui/x-date-pickers 8.11.0 → 8.11.2

package/CHANGELOG.md

@@ -5,6 +5,175 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.11.2
+
+_Sep 10, 2025_
+
+We'd like to extend a big thank you to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@ludvigeriksson, @sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @brijeshb42, @flaviendelangle, @Janpot, @LukasTy, @MBilalShafi, @noraleonte, @rita-codes, @romgrk, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.11.2`
+
+- [DataGrid] Allow opting out of the exclude row selection model (#19423) @MBilalShafi
+- [DataGrid] Fix column dropdown menu text alignment for the "Unpin" menu item (#19462) @MBilalShafi
+- [DataGrid] Fix indeterminate state for "Select all" checkbox with exclude model (#19466) @MBilalShafi
+- [DataGrid] Fix styled API arguments error (#19460) @MBilalShafi
+- [DataGrid] Fix `stringify()` for theme objects (#19427) @romgrk
+
+#### `@mui/x-data-grid-pro@8.11.2` [![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@8.11.2`.
+
+#### `@mui/x-data-grid-premium@8.11.2` [![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@8.11.2`, plus:
+
+- [DataGridPremium] Fallback to the regular reorder method for plain data (#19467) @MBilalShafi
+- [DataGridPremium] Fix showing `0` as total aggregation value when aggregation position is set to `null` for row groups (#19515) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.11.2`
+
+- [pickers] Gracefully handle `textField.slotProps` (#18980) @LukasTy
+- [pickers] Improve hour and minute placement in Date Time Picker (#19227) @MBilalShafi
+- [pickers] Use `calendarState.currentMonth` in Month Calendar when available (#19073) @LukasTy
+- [pickers] Improve invalid value pasting into a section (#19357) @sai6855
+- [fields] Remove redundant `id` and `aria-labelledby` attributes from spinbuttons (#19523) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.11.2` [![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@8.11.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.11.2`
+
+- [charts] Fix highlight regression (#19486) @alexfauquette
+- [charts] Improve code reuse in `ChartsXAxis` and `ChartsYAxis` (#19198) @bernardobelchior
+- [charts] Simplify params in `getRange` and `createDateFormatter` (#19517) @bernardobelchior
+- [charts] Handle domain edge cases with `filterMode: 'discard'` (#19199) @bernardobelchior
+- [l10n] Add Swedish (sv-SE) locale (#19489) @ludvigeriksson
+
+#### `@mui/x-charts-pro@8.11.2` [![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@8.11.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.11.2`
+
+- [TreeView] Do not mutate `props.items` in the `getItemTree()` method (#19483) @flaviendelangle
+- [TreeView] Expose a new hook to apply selection propagation on the selected items (#19402) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.11.2` [![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@8.11.2`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.11.2`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add recipe for save and manage filters from the panel (#19361) @siriwatknp
+
+### Core
+
+- [code-infra] Remove log when restarting dev server (#19490) @bernardobelchior
+- [code-infra] Store test results in CI (#19507) @Janpot
+
+### Miscellaneous
+
+- [infra] Set nodejs versions of various CIs to 22.18 (#19503) @brijeshb42
+- [test] Split infinitive @romgrk
+
+## 8.11.1
+
+_Sep 4, 2025_
+
+We'd like to extend a big thank you to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+Special thanks go out to the community members for their valuable contributions:
+@sai6855
+
+The following are all team members who have contributed to this release:
+@brijeshb42, @flaviendelangle, @JCQuintas, @mapache-salvaje, @oliviertassinari
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.11.1`
+
+- [DataGrid] Refine types in `GridCell` component (#19384) @sai6855
+
+#### `@mui/x-data-grid-pro@8.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-data-grid@8.11.1`.
+
+#### `@mui/x-data-grid-premium@8.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-data-grid-pro@8.11.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.11.1`
+
+- [pickers] Merge `slotProps` for input adornment in `PickerFieldUI` component (#19399) @sai6855
+
+#### `@mui/x-date-pickers-pro@8.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-date-pickers@8.11.1`.
+
+### Charts
+
+#### `@mui/x-charts@8.11.1`
+
+- [charts] Prevent crash and warn user on incorrect `axisId` when composing (#19397) @JCQuintas
+
+#### `@mui/x-charts-pro@8.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@8.11.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.11.1`
+
+- [tree view] Expose the methods to manually refetch the children of an item (#19248) @flaviendelangle
+- [tree view] Use the shared store implementation instead of the custom one (#19261) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.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-tree-view@8.11.1`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.11.1`
+
+Internal changes.
+
+### Docs
+
+- [docs] Fix grammar and spelling mistakes on the Date and Time Pickers pages (#19300) @mapache-salvaje
+- [docs] Remove wrong legend info (#19383) @JCQuintas
+
+### Core
+
+- [internal] Fix action alert (#19388) @oliviertassinari
+- [internal] Fix pnpm valelint to have 0 errors @oliviertassinari
+- [infra] Remove "main" fields from publishable packages (#19407) @brijeshb42
+
 ## 8.11.0
 
 _Aug 29, 2025_

package/DateCalendar/DateCalendar.js

@@ -337,6 +337,7 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
           yearsPerRow: yearsPerRow,
           referenceDate: referenceDate
         })), view === 'month' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MonthCalendar.MonthCalendar, (0, _extends2.default)({}, baseDateValidationProps, commonViewProps, {
+          currentMonth: calendarState.currentMonth,
           hasFocus: hasFocus,
           className: className,
           value: value,

package/MonthCalendar/MonthCalendar.js

@@ -31,7 +31,7 @@ var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateConte
 var _useDateManager = require("../managers/useDateManager");
 var _usePickerAdapter = require("../hooks/usePickerAdapter");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["autoFocus", "className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
+const _excluded = ["autoFocus", "className", "currentMonth", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
@@ -48,6 +48,7 @@ function useMonthCalendarDefaultizedProps(props, name) {
     monthsPerRow: themeProps.monthsPerRow ?? 3
   });
 }
+const isSameMonth = (monthA, monthB, yearA, yearB, adapter) => Boolean(monthA === monthB && yearB && adapter.isSameYear(yearA, yearB));
 const MonthCalendarRoot = (0, _styles.styled)('div', {
   name: 'MuiMonthCalendar',
   slot: 'Root',
@@ -91,6 +92,7 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
   const {
       autoFocus,
       className,
+      currentMonth,
       classes: classesProp,
       value: valueProp,
       defaultValue,
@@ -181,11 +183,12 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
     if (readOnly) {
       return;
     }
-    const newDate = adapter.setMonth(value ?? referenceDate, month);
+    const currentValue = value && currentMonth && !adapter.isSameYear(value, currentMonth) ? adapter.setYear(value, adapter.getYear(currentMonth)) : value;
+    const newDate = adapter.setMonth(currentValue ?? referenceDate, month);
     handleValueChange(newDate);
   });
   const focusMonth = (0, _useEventCallback.default)(month => {
-    if (!isMonthDisabled(adapter.setMonth(value ?? referenceDate, month))) {
+    if (!isMonthDisabled(adapter.setMonth(value ?? currentMonth ?? referenceDate, month))) {
       setFocusedMonth(month);
       changeHasFocus(true);
       if (onMonthFocus) {
@@ -236,11 +239,11 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
     "aria-labelledby": gridLabelId,
     monthsPerRow: monthsPerRow
   }, other, {
-    children: (0, _dateUtils.getMonthsInYear)(adapter, value ?? referenceDate).map(month => {
+    children: (0, _dateUtils.getMonthsInYear)(adapter, currentMonth ?? value ?? referenceDate).map(month => {
       const monthNumber = adapter.getMonth(month);
       const monthText = adapter.format(month, 'monthShort');
       const monthLabel = adapter.format(month, 'month');
-      const isSelected = monthNumber === selectedMonth;
+      const isSelected = isSameMonth(monthNumber, selectedMonth, month, value, adapter);
       const isDisabled = disabled || isMonthDisabled(month);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MonthCalendarButton.MonthCalendarButton, {
         selected: isSelected,
@@ -252,7 +255,7 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
         tabIndex: monthNumber === focusedMonth && !isDisabled ? 0 : -1,
         onFocus: handleMonthFocus,
         onBlur: handleMonthBlur,
-        "aria-current": todayMonth === monthNumber ? 'date' : undefined,
+        "aria-current": isSameMonth(monthNumber, todayMonth, month, now, adapter) ? 'date' : undefined,
         "aria-label": monthLabel,
         slots: slots,
         slotProps: slotProps,
@@ -274,6 +277,7 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
+  currentMonth: _propTypes.default.object,
   /**
    * The default selected value.
    * Used when the component is not controlled.

package/MonthCalendar/MonthCalendar.types.d.ts

@@ -32,6 +32,7 @@ export interface ExportedMonthCalendarProps {
 export interface MonthCalendarProps extends ExportedMonthCalendarProps, MonthValidationProps, BaseDateValidationProps, TimezoneProps, FormProps {
   autoFocus?: boolean;
   className?: string;
+  currentMonth?: PickerValidDate;
   /**
    * Override or extend the styles applied to the component.
    */

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -55,12 +55,6 @@ const MultiSectionDigitalClockSectionRoot = (0, _styles.styled)(_MenuList.defaul
   '&:not(:first-of-type)': {
     borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
   },
-  '&::after': {
-    display: 'block',
-    content: '""',
-    // subtracting the height of one item, extra margin and borders to make sure the max height is correct
-    height: 'calc(100% - 40px - 6px)'
-  },
   variants: [{
     props: {
       hasDigitalClockAlreadyBeenRendered: true
@@ -145,9 +139,21 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
     }
     previousActive.current = activeItem;
     const offsetTop = activeItem.offsetTop;
+    const itemHeight = activeItem.offsetHeight;
+    const containerHeight = containerRef.current.clientHeight;
+    const scrollableHeight = containerRef.current.scrollHeight;
+
+    // Calculate the ideal centered position
+    const centeredPosition = offsetTop - containerHeight / 2 + itemHeight / 2;
+
+    // Calculate the maximum scroll position that would show content at the bottom
+    const maxScrollTop = scrollableHeight - containerHeight;
+
+    // If centering would create empty space at the bottom, align the last items to the bottom instead
+    const scrollPosition = Math.min(centeredPosition, maxScrollTop);
 
-    // Subtracting the 4px of extra margin intended for the first visible section item
-    containerRef.current.scrollTop = offsetTop - 4;
+    // Ensure we don't scroll past the top
+    containerRef.current.scrollTop = Math.max(0, scrollPosition);
   });
   const focusedOptionIndex = items.findIndex(item => item.isFocused(item.value));
   const handleKeyDown = event => {

package/esm/DateCalendar/DateCalendar.js

@@ -330,6 +330,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
           yearsPerRow: yearsPerRow,
           referenceDate: referenceDate
         })), view === 'month' && /*#__PURE__*/_jsx(MonthCalendar, _extends({}, baseDateValidationProps, commonViewProps, {
+          currentMonth: calendarState.currentMonth,
           hasFocus: hasFocus,
           className: className,
           value: value,

package/esm/MonthCalendar/MonthCalendar.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
+const _excluded = ["autoFocus", "className", "currentMonth", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -40,6 +40,7 @@ export function useMonthCalendarDefaultizedProps(props, name) {
     monthsPerRow: themeProps.monthsPerRow ?? 3
   });
 }
+const isSameMonth = (monthA, monthB, yearA, yearB, adapter) => Boolean(monthA === monthB && yearB && adapter.isSameYear(yearA, yearB));
 const MonthCalendarRoot = styled('div', {
   name: 'MuiMonthCalendar',
   slot: 'Root',
@@ -83,6 +84,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
   const {
       autoFocus,
       className,
+      currentMonth,
       classes: classesProp,
       value: valueProp,
       defaultValue,
@@ -173,11 +175,12 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     if (readOnly) {
       return;
     }
-    const newDate = adapter.setMonth(value ?? referenceDate, month);
+    const currentValue = value && currentMonth && !adapter.isSameYear(value, currentMonth) ? adapter.setYear(value, adapter.getYear(currentMonth)) : value;
+    const newDate = adapter.setMonth(currentValue ?? referenceDate, month);
     handleValueChange(newDate);
   });
   const focusMonth = useEventCallback(month => {
-    if (!isMonthDisabled(adapter.setMonth(value ?? referenceDate, month))) {
+    if (!isMonthDisabled(adapter.setMonth(value ?? currentMonth ?? referenceDate, month))) {
       setFocusedMonth(month);
       changeHasFocus(true);
       if (onMonthFocus) {
@@ -228,11 +231,11 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     "aria-labelledby": gridLabelId,
     monthsPerRow: monthsPerRow
   }, other, {
-    children: getMonthsInYear(adapter, value ?? referenceDate).map(month => {
+    children: getMonthsInYear(adapter, currentMonth ?? value ?? referenceDate).map(month => {
       const monthNumber = adapter.getMonth(month);
       const monthText = adapter.format(month, 'monthShort');
       const monthLabel = adapter.format(month, 'month');
-      const isSelected = monthNumber === selectedMonth;
+      const isSelected = isSameMonth(monthNumber, selectedMonth, month, value, adapter);
       const isDisabled = disabled || isMonthDisabled(month);
       return /*#__PURE__*/_jsx(MonthCalendarButton, {
         selected: isSelected,
@@ -244,7 +247,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
         tabIndex: monthNumber === focusedMonth && !isDisabled ? 0 : -1,
         onFocus: handleMonthFocus,
         onBlur: handleMonthBlur,
-        "aria-current": todayMonth === monthNumber ? 'date' : undefined,
+        "aria-current": isSameMonth(monthNumber, todayMonth, month, now, adapter) ? 'date' : undefined,
         "aria-label": monthLabel,
         slots: slots,
         slotProps: slotProps,
@@ -266,6 +269,7 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
+  currentMonth: PropTypes.object,
   /**
    * The default selected value.
    * Used when the component is not controlled.

package/esm/MonthCalendar/MonthCalendar.types.d.ts

@@ -32,6 +32,7 @@ export interface ExportedMonthCalendarProps {
 export interface MonthCalendarProps extends ExportedMonthCalendarProps, MonthValidationProps, BaseDateValidationProps, TimezoneProps, FormProps {
   autoFocus?: boolean;
   className?: string;
+  currentMonth?: PickerValidDate;
   /**
    * Override or extend the styles applied to the component.
    */

package/esm/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -48,12 +48,6 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
   '&:not(:first-of-type)': {
     borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
   },
-  '&::after': {
-    display: 'block',
-    content: '""',
-    // subtracting the height of one item, extra margin and borders to make sure the max height is correct
-    height: 'calc(100% - 40px - 6px)'
-  },
   variants: [{
     props: {
       hasDigitalClockAlreadyBeenRendered: true
@@ -138,9 +132,21 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
     }
     previousActive.current = activeItem;
     const offsetTop = activeItem.offsetTop;
+    const itemHeight = activeItem.offsetHeight;
+    const containerHeight = containerRef.current.clientHeight;
+    const scrollableHeight = containerRef.current.scrollHeight;
+
+    // Calculate the ideal centered position
+    const centeredPosition = offsetTop - containerHeight / 2 + itemHeight / 2;
+
+    // Calculate the maximum scroll position that would show content at the bottom
+    const maxScrollTop = scrollableHeight - containerHeight;
+
+    // If centering would create empty space at the bottom, align the last items to the bottom instead
+    const scrollPosition = Math.min(centeredPosition, maxScrollTop);
 
-    // Subtracting the 4px of extra margin intended for the first visible section item
-    containerRef.current.scrollTop = offsetTop - 4;
+    // Ensure we don't scroll past the top
+    containerRef.current.scrollTop = Math.max(0, scrollPosition);
   });
   const focusedOptionIndex = items.findIndex(item => item.isFocused(item.value));
   const handleKeyDown = event => {

package/esm/index.js

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

package/esm/internals/components/PickerFieldUI.js

@@ -17,6 +17,7 @@ import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import MuiTextField from '@mui/material/TextField';
 import MuiIconButton from '@mui/material/IconButton';
 import MuiInputAdornment from '@mui/material/InputAdornment';
+import { major as materialMajor } from '@mui/material/version';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { useFieldOwnerState } from "../hooks/useFieldOwnerState.js";
 import { usePickerTranslations } from "../../hooks/index.js";
@@ -24,6 +25,7 @@ import { ClearIcon as MuiClearIcon } from "../../icons/index.js";
 import { useNullablePickerContext } from "../hooks/useNullablePickerContext.js";
 import { PickersTextField } from "../../PickersTextField/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const noop = () => {};
 export const cleanFieldResponse = _ref => {
   let {
       enableAccessibleFieldDOMStructure
@@ -40,13 +42,20 @@ export const cleanFieldResponse = _ref => {
         openPickerAriaLabel
       } = fieldResponse,
       other = _objectWithoutPropertiesLoose(fieldResponse, _excluded2);
+    const mergedInputProps = materialMajor >= 6 && other?.slotProps?.input ? mergeSlotProps(other?.slotProps?.input, InputProps) : noop;
     return {
       clearable,
       onClear,
       clearButtonPosition,
       openPickerButtonPosition,
       openPickerAriaLabel,
-      textFieldProps: _extends({}, other, {
+      textFieldProps: _extends({}, other, materialMajor >= 6 && other?.slotProps?.input ? {
+        slotProps: _extends({}, other?.slotProps, {
+          input: ownerState => _extends({}, resolveComponentProps(mergedInputProps, ownerState), {
+            readOnly
+          })
+        })
+      } : {
         InputProps: _extends({}, InputProps ?? {}, {
           readOnly
         })
@@ -68,13 +77,27 @@ export const cleanFieldResponse = _ref => {
       openPickerAriaLabel
     } = fieldResponse,
     other = _objectWithoutPropertiesLoose(fieldResponse, _excluded3);
+  const mergedInputProps = materialMajor >= 6 && other?.slotProps?.input ? mergeSlotProps(other?.slotProps?.input, InputProps) : noop;
+  const mergedHtmlInputProps = materialMajor >= 6 && other?.slotProps?.htmlInput ? mergeSlotProps(other?.slotProps?.htmlInput, inputProps) : noop;
   return {
     clearable,
     onClear,
     clearButtonPosition,
     openPickerButtonPosition,
     openPickerAriaLabel,
-    textFieldProps: _extends({}, other, {
+    textFieldProps: _extends({}, other, materialMajor >= 6 && (other?.slotProps?.input || other?.slotProps?.htmlInput) ? {
+      slotProps: _extends({}, other?.slotProps, {
+        input: ownerState => _extends({}, resolveComponentProps(mergedInputProps, ownerState), {
+          readOnly
+        }),
+        htmlInput: ownerState => _extends({}, resolveComponentProps(mergedHtmlInputProps, ownerState), {
+          inputMode,
+          onPaste,
+          onKeyDown,
+          ref: inputRef
+        })
+      })
+    } : {
       InputProps: _extends({}, InputProps ?? {}, {
         readOnly
       }),
@@ -139,7 +162,7 @@ export function PickerFieldUI(props) {
     startInputAdornmentProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded4);
   const _useSlotProps2 = useSlotProps({
       elementType: InputAdornment,
-      externalSlotProps: slotProps?.inputAdornment,
+      externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.inputAdornment, slotProps?.inputAdornment),
       additionalProps: {
         position: 'end'
       },
@@ -198,14 +221,13 @@ export function PickerFieldUI(props) {
     ownerState
   });
   textFieldProps.ref = useForkRef(textFieldProps.ref, pickerContext?.rootRef);
-  if (!textFieldProps.InputProps) {
-    textFieldProps.InputProps = {};
-  }
+  const additionalTextFieldInputProps = {};
+  const textFieldInputProps = resolveComponentProps((materialMajor >= 6 && textFieldProps?.slotProps?.input) ?? textFieldProps.InputProps, ownerState);
   if (pickerContext) {
-    textFieldProps.InputProps.ref = pickerContext.triggerRef;
+    additionalTextFieldInputProps.ref = pickerContext.triggerRef;
   }
-  if (!textFieldProps.InputProps?.startAdornment && (clearButtonPosition === 'start' || openPickerButtonPosition === 'start')) {
-    textFieldProps.InputProps.startAdornment = /*#__PURE__*/_jsxs(InputAdornment, _extends({}, startInputAdornmentProps, {
+  if (!textFieldInputProps?.startAdornment && (clearButtonPosition === 'start' || openPickerButtonPosition === 'start')) {
+    additionalTextFieldInputProps.startAdornment = /*#__PURE__*/_jsxs(InputAdornment, _extends({}, startInputAdornmentProps, {
       children: [openPickerButtonPosition === 'start' && /*#__PURE__*/_jsx(OpenPickerButton, _extends({}, openPickerButtonProps, {
         children: /*#__PURE__*/_jsx(OpenPickerIcon, _extends({}, openPickerIconProps))
       })), clearButtonPosition === 'start' && /*#__PURE__*/_jsx(ClearButton, _extends({}, clearButtonProps, {
@@ -213,8 +235,8 @@ export function PickerFieldUI(props) {
       }))]
     }));
   }
-  if (!textFieldProps.InputProps?.endAdornment && (clearButtonPosition === 'end' || openPickerButtonPosition === 'end')) {
-    textFieldProps.InputProps.endAdornment = /*#__PURE__*/_jsxs(InputAdornment, _extends({}, endInputAdornmentProps, {
+  if (!textFieldInputProps?.endAdornment && (clearButtonPosition === 'end' || openPickerButtonPosition === 'end')) {
+    additionalTextFieldInputProps.endAdornment = /*#__PURE__*/_jsxs(InputAdornment, _extends({}, endInputAdornmentProps, {
       children: [clearButtonPosition === 'end' && /*#__PURE__*/_jsx(ClearButton, _extends({}, clearButtonProps, {
         children: /*#__PURE__*/_jsx(ClearIcon, _extends({}, clearIconProps))
       })), openPickerButtonPosition === 'end' && /*#__PURE__*/_jsx(OpenPickerButton, _extends({}, openPickerButtonProps, {
@@ -239,7 +261,18 @@ export function PickerFieldUI(props) {
       }
     }, ...(Array.isArray(textFieldProps.sx) ? textFieldProps.sx : [textFieldProps.sx])];
   }
-  return /*#__PURE__*/_jsx(TextField, _extends({}, textFieldProps));
+  const resolvedTextFieldInputProps = materialMajor >= 6 && textFieldProps?.slotProps?.input ? resolveComponentProps(mergeSlotProps(textFieldInputProps, additionalTextFieldInputProps), ownerState) : _extends({}, textFieldInputProps, additionalTextFieldInputProps);
+
+  // Remove the `input` slotProps to avoid them overriding the manually resolved `InputProps`.
+  // Relevant on `materialMajor >= 6` since `slotProps` would take precedence.
+  delete textFieldProps?.slotProps?.input;
+  if (fieldResponse.enableAccessibleFieldDOMStructure) {
+    // Remove the `slotProps` on `PickersTextField` as they are not supported.
+    delete textFieldProps?.slotProps;
+  }
+  return /*#__PURE__*/_jsx(TextField, _extends({}, textFieldProps, {
+    InputProps: resolvedTextFieldInputProps
+  }));
 }
 export function mergeSlotProps(slotPropsA, slotPropsB) {
   if (!slotPropsA) {

package/esm/internals/hooks/useField/useFieldSectionContentProps.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import useId from '@mui/utils/useId';
 import { usePickerAdapter, usePickerTranslations } from "../../../hooks/index.js";
 import { syncSelectionToDOM } from "./syncSelectionToDOM.js";
 /**
@@ -13,7 +12,6 @@ import { syncSelectionToDOM } from "./syncSelectionToDOM.js";
 export function useFieldSectionContentProps(parameters) {
   const adapter = usePickerAdapter();
   const translations = usePickerTranslations();
-  const id = useId();
   const {
     focused,
     domGetters,
@@ -147,7 +145,6 @@ export function useFieldSectionContentProps(parameters) {
       onDragOver: handleDragOver,
       onFocus: createFocusHandler(sectionIndex),
       // Aria attributes
-      'aria-labelledby': `${id}-${section.type}`,
       'aria-readonly': readOnly,
       'aria-valuenow': getSectionValueNow(section, adapter),
       'aria-valuemin': sectionBoundaries.minimum,
@@ -159,7 +156,6 @@ export function useFieldSectionContentProps(parameters) {
       tabIndex: isContainerEditable || sectionIndex > 0 ? -1 : 0,
       contentEditable: !isContainerEditable && !disabled && !readOnly,
       role: 'spinbutton',
-      id: `${id}-${section.type}`,
       'data-range-position': section.dateName || undefined,
       spellCheck: isEditable ? false : undefined,
       autoCapitalize: isEditable ? 'off' : undefined,
@@ -167,7 +163,7 @@ export function useFieldSectionContentProps(parameters) {
       children: section.value || section.placeholder,
       inputMode: section.contentType === 'letter' ? 'text' : 'numeric'
     };
-  }, [sectionsValueBoundaries, id, isContainerEditable, disabled, readOnly, isEditable, translations, adapter, handleInput, handlePaste, handleMouseUp, handleDragOver, createFocusHandler, fieldValueManager, value]);
+  }, [sectionsValueBoundaries, isContainerEditable, disabled, readOnly, isEditable, translations, adapter, handleInput, handlePaste, handleMouseUp, handleDragOver, createFocusHandler, fieldValueManager, value]);
 }
 function getSectionValueText(section, adapter) {
   if (!section.value) {
@@ -177,13 +173,18 @@ function getSectionValueText(section, adapter) {
     case 'month':
       {
         if (section.contentType === 'digit') {
-          return adapter.format(adapter.setMonth(adapter.date(), Number(section.value) - 1), 'month');
+          const dateWithMonth = adapter.setMonth(adapter.date(), Number(section.value) - 1);
+          return adapter.isValid(dateWithMonth) ? adapter.format(dateWithMonth, 'month') : '';
         }
         const parsedDate = adapter.parse(section.value, section.format);
-        return parsedDate ? adapter.format(parsedDate, 'month') : undefined;
+        return parsedDate && adapter.isValid(parsedDate) ? adapter.format(parsedDate, 'month') : undefined;
       }
     case 'day':
-      return section.contentType === 'digit' ? adapter.format(adapter.setDate(adapter.startOfYear(adapter.date()), Number(section.value)), 'dayOfMonthFull') : section.value;
+      if (section.contentType === 'digit') {
+        const dateWithDay = adapter.setDate(adapter.startOfYear(adapter.date()), Number(section.value));
+        return adapter.isValid(dateWithDay) ? adapter.format(dateWithDay, 'dayOfMonthFull') : '';
+      }
+      return section.value;
     case 'weekDay':
       // TODO: improve by providing the label of the week day
       return undefined;

package/index.js

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

package/internals/components/PickerFieldUI.js

@@ -21,6 +21,7 @@ var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveC
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
+var _version = require("@mui/material/version");
 var _useSlotProps5 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _useFieldOwnerState = require("../hooks/useFieldOwnerState");
 var _hooks = require("../../hooks");
@@ -36,6 +37,7 @@ const _excluded = ["enableAccessibleFieldDOMStructure"],
   _excluded6 = ["ownerState"],
   _excluded7 = ["ownerState"],
   _excluded8 = ["InputProps", "inputProps"];
+const noop = () => {};
 const cleanFieldResponse = _ref => {
   let {
       enableAccessibleFieldDOMStructure
@@ -52,13 +54,20 @@ const cleanFieldResponse = _ref => {
         openPickerAriaLabel
       } = fieldResponse,
       other = (0, _objectWithoutPropertiesLoose2.default)(fieldResponse, _excluded2);
+    const mergedInputProps = _version.major >= 6 && other?.slotProps?.input ? mergeSlotProps(other?.slotProps?.input, InputProps) : noop;
     return {
       clearable,
       onClear,
       clearButtonPosition,
       openPickerButtonPosition,
       openPickerAriaLabel,
-      textFieldProps: (0, _extends2.default)({}, other, {
+      textFieldProps: (0, _extends2.default)({}, other, _version.major >= 6 && other?.slotProps?.input ? {
+        slotProps: (0, _extends2.default)({}, other?.slotProps, {
+          input: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(mergedInputProps, ownerState), {
+            readOnly
+          })
+        })
+      } : {
         InputProps: (0, _extends2.default)({}, InputProps ?? {}, {
           readOnly
         })
@@ -80,13 +89,27 @@ const cleanFieldResponse = _ref => {
       openPickerAriaLabel
     } = fieldResponse,
     other = (0, _objectWithoutPropertiesLoose2.default)(fieldResponse, _excluded3);
+  const mergedInputProps = _version.major >= 6 && other?.slotProps?.input ? mergeSlotProps(other?.slotProps?.input, InputProps) : noop;
+  const mergedHtmlInputProps = _version.major >= 6 && other?.slotProps?.htmlInput ? mergeSlotProps(other?.slotProps?.htmlInput, inputProps) : noop;
   return {
     clearable,
     onClear,
     clearButtonPosition,
     openPickerButtonPosition,
     openPickerAriaLabel,
-    textFieldProps: (0, _extends2.default)({}, other, {
+    textFieldProps: (0, _extends2.default)({}, other, _version.major >= 6 && (other?.slotProps?.input || other?.slotProps?.htmlInput) ? {
+      slotProps: (0, _extends2.default)({}, other?.slotProps, {
+        input: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(mergedInputProps, ownerState), {
+          readOnly
+        }),
+        htmlInput: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(mergedHtmlInputProps, ownerState), {
+          inputMode,
+          onPaste,
+          onKeyDown,
+          ref: inputRef
+        })
+      })
+    } : {
       InputProps: (0, _extends2.default)({}, InputProps ?? {}, {
         readOnly
       }),
@@ -152,7 +175,7 @@ function PickerFieldUI(props) {
     startInputAdornmentProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded4);
   const _useSlotProps2 = (0, _useSlotProps5.default)({
       elementType: InputAdornment,
-      externalSlotProps: slotProps?.inputAdornment,
+      externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.inputAdornment, slotProps?.inputAdornment),
       additionalProps: {
         position: 'end'
       },
@@ -211,14 +234,13 @@ function PickerFieldUI(props) {
     ownerState
   });
   textFieldProps.ref = (0, _useForkRef.default)(textFieldProps.ref, pickerContext?.rootRef);
-  if (!textFieldProps.InputProps) {
-    textFieldProps.InputProps = {};
-  }
+  const additionalTextFieldInputProps = {};
+  const textFieldInputProps = (0, _resolveComponentProps.default)((_version.major >= 6 && textFieldProps?.slotProps?.input) ?? textFieldProps.InputProps, ownerState);
   if (pickerContext) {
-    textFieldProps.InputProps.ref = pickerContext.triggerRef;
+    additionalTextFieldInputProps.ref = pickerContext.triggerRef;
   }
-  if (!textFieldProps.InputProps?.startAdornment && (clearButtonPosition === 'start' || openPickerButtonPosition === 'start')) {
-    textFieldProps.InputProps.startAdornment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(InputAdornment, (0, _extends2.default)({}, startInputAdornmentProps, {
+  if (!textFieldInputProps?.startAdornment && (clearButtonPosition === 'start' || openPickerButtonPosition === 'start')) {
+    additionalTextFieldInputProps.startAdornment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(InputAdornment, (0, _extends2.default)({}, startInputAdornmentProps, {
       children: [openPickerButtonPosition === 'start' && /*#__PURE__*/(0, _jsxRuntime.jsx)(OpenPickerButton, (0, _extends2.default)({}, openPickerButtonProps, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OpenPickerIcon, (0, _extends2.default)({}, openPickerIconProps))
       })), clearButtonPosition === 'start' && /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearButton, (0, _extends2.default)({}, clearButtonProps, {
@@ -226,8 +248,8 @@ function PickerFieldUI(props) {
       }))]
     }));
   }
-  if (!textFieldProps.InputProps?.endAdornment && (clearButtonPosition === 'end' || openPickerButtonPosition === 'end')) {
-    textFieldProps.InputProps.endAdornment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(InputAdornment, (0, _extends2.default)({}, endInputAdornmentProps, {
+  if (!textFieldInputProps?.endAdornment && (clearButtonPosition === 'end' || openPickerButtonPosition === 'end')) {
+    additionalTextFieldInputProps.endAdornment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(InputAdornment, (0, _extends2.default)({}, endInputAdornmentProps, {
       children: [clearButtonPosition === 'end' && /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearButton, (0, _extends2.default)({}, clearButtonProps, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearIcon, (0, _extends2.default)({}, clearIconProps))
       })), openPickerButtonPosition === 'end' && /*#__PURE__*/(0, _jsxRuntime.jsx)(OpenPickerButton, (0, _extends2.default)({}, openPickerButtonProps, {
@@ -252,7 +274,18 @@ function PickerFieldUI(props) {
       }
     }, ...(Array.isArray(textFieldProps.sx) ? textFieldProps.sx : [textFieldProps.sx])];
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({}, textFieldProps));
+  const resolvedTextFieldInputProps = _version.major >= 6 && textFieldProps?.slotProps?.input ? (0, _resolveComponentProps.default)(mergeSlotProps(textFieldInputProps, additionalTextFieldInputProps), ownerState) : (0, _extends2.default)({}, textFieldInputProps, additionalTextFieldInputProps);
+
+  // Remove the `input` slotProps to avoid them overriding the manually resolved `InputProps`.
+  // Relevant on `materialMajor >= 6` since `slotProps` would take precedence.
+  delete textFieldProps?.slotProps?.input;
+  if (fieldResponse.enableAccessibleFieldDOMStructure) {
+    // Remove the `slotProps` on `PickersTextField` as they are not supported.
+    delete textFieldProps?.slotProps;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({}, textFieldProps, {
+    InputProps: resolvedTextFieldInputProps
+  }));
 }
 function mergeSlotProps(slotPropsA, slotPropsB) {
   if (!slotPropsA) {

package/internals/hooks/useField/useFieldSectionContentProps.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useFieldSectionContentProps = useFieldSectionContentProps;
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _hooks = require("../../../hooks");
 var _syncSelectionToDOM = require("./syncSelectionToDOM");
 /**
@@ -21,7 +20,6 @@ var _syncSelectionToDOM = require("./syncSelectionToDOM");
 function useFieldSectionContentProps(parameters) {
   const adapter = (0, _hooks.usePickerAdapter)();
   const translations = (0, _hooks.usePickerTranslations)();
-  const id = (0, _useId.default)();
   const {
     focused,
     domGetters,
@@ -155,7 +153,6 @@ function useFieldSectionContentProps(parameters) {
       onDragOver: handleDragOver,
       onFocus: createFocusHandler(sectionIndex),
       // Aria attributes
-      'aria-labelledby': `${id}-${section.type}`,
       'aria-readonly': readOnly,
       'aria-valuenow': getSectionValueNow(section, adapter),
       'aria-valuemin': sectionBoundaries.minimum,
@@ -167,7 +164,6 @@ function useFieldSectionContentProps(parameters) {
       tabIndex: isContainerEditable || sectionIndex > 0 ? -1 : 0,
       contentEditable: !isContainerEditable && !disabled && !readOnly,
       role: 'spinbutton',
-      id: `${id}-${section.type}`,
       'data-range-position': section.dateName || undefined,
       spellCheck: isEditable ? false : undefined,
       autoCapitalize: isEditable ? 'off' : undefined,
@@ -175,7 +171,7 @@ function useFieldSectionContentProps(parameters) {
       children: section.value || section.placeholder,
       inputMode: section.contentType === 'letter' ? 'text' : 'numeric'
     };
-  }, [sectionsValueBoundaries, id, isContainerEditable, disabled, readOnly, isEditable, translations, adapter, handleInput, handlePaste, handleMouseUp, handleDragOver, createFocusHandler, fieldValueManager, value]);
+  }, [sectionsValueBoundaries, isContainerEditable, disabled, readOnly, isEditable, translations, adapter, handleInput, handlePaste, handleMouseUp, handleDragOver, createFocusHandler, fieldValueManager, value]);
 }
 function getSectionValueText(section, adapter) {
   if (!section.value) {
@@ -185,13 +181,18 @@ function getSectionValueText(section, adapter) {
     case 'month':
       {
         if (section.contentType === 'digit') {
-          return adapter.format(adapter.setMonth(adapter.date(), Number(section.value) - 1), 'month');
+          const dateWithMonth = adapter.setMonth(adapter.date(), Number(section.value) - 1);
+          return adapter.isValid(dateWithMonth) ? adapter.format(dateWithMonth, 'month') : '';
         }
         const parsedDate = adapter.parse(section.value, section.format);
-        return parsedDate ? adapter.format(parsedDate, 'month') : undefined;
+        return parsedDate && adapter.isValid(parsedDate) ? adapter.format(parsedDate, 'month') : undefined;
       }
     case 'day':
-      return section.contentType === 'digit' ? adapter.format(adapter.setDate(adapter.startOfYear(adapter.date()), Number(section.value)), 'dayOfMonthFull') : section.value;
+      if (section.contentType === 'digit') {
+        const dateWithDay = adapter.setDate(adapter.startOfYear(adapter.date()), Number(section.value));
+        return adapter.isValid(dateWithDay) ? adapter.format(dateWithDay, 'dayOfMonthFull') : '';
+      }
+      return section.value;
     case 'weekDay':
       // TODO: improve by providing the label of the week day
       return undefined;

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "8.11.0",
+  "version": "8.11.2",
   "author": "MUI Team",
   "description": "The community edition of the MUI X Date and Time Picker components.",
-  "main": "./index.js",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/mui/mui-x/issues"
@@ -35,12 +34,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.2",
-    "@mui/utils": "^7.3.1",
+    "@mui/utils": "^7.3.2",
     "@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": "8.11.0"
+    "@mui/x-internals": "8.11.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -90,27 +89,28 @@
     "node": ">=14.0.0"
   },
   "type": "commonjs",
+  "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "import": {
-        "types": "./esm/index.d.ts",
-        "default": "./esm/index.js"
-      },
       "require": {
         "types": "./index.d.ts",
         "default": "./index.js"
+      },
+      "default": {
+        "types": "./esm/index.d.ts",
+        "default": "./esm/index.js"
       }
     },
     "./*": {
-      "import": {
-        "types": "./esm/*/index.d.ts",
-        "default": "./esm/*/index.js"
-      },
       "require": {
         "types": "./*/index.d.ts",
         "default": "./*/index.js"
+      },
+      "default": {
+        "types": "./esm/*/index.d.ts",
+        "default": "./esm/*/index.js"
       }
     },
     "./esm": null