@mui/x-date-pickers 8.11.1 → 8.11.3

package/CHANGELOG.md

@@ -5,6 +5,187 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.11.3
+
+_Sep 16, 2025_
+
+We'd like to extend a big thank you to the 11 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:
+@sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @brijeshb42, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @LukasTy, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.11.3`
+
+- [DataGrid] Fix numeric font size not being applied (#19552) @cherniavskii
+- [DataGrid] Improve `operator` types to display literal values (#19529) @siriwatknp
+
+#### `@mui/x-data-grid-pro@8.11.3` [![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.3`.
+
+#### `@mui/x-data-grid-premium@8.11.3` [![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.3`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.11.3`
+
+- [pickers] Refactor `slots` and `slotProps` propagation strategy (#18867) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.11.3` [![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.3`.
+
+### Charts
+
+#### `@mui/x-charts@8.11.3`
+
+- [charts] Add `inline-` piecewise legend options (#19382) @JCQuintas
+- [charts] Add bar gradient example (#19174) @bernardobelchior
+- [charts] Ignore empty tick labels in label overlap computation (#19547) @alexfauquette
+- [charts] Rename `isBandScale` to `isDiscreteScale` (#19514) @bernardobelchior
+- [charts] Fix legend position affecting toolbar's position (#19257) @sai6855
+
+#### `@mui/x-charts-pro@8.11.3` [![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.3`, plus:
+
+- [charts-pro] Add chart title and caption to export demo (#19524) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.11.3`
+
+- [tree view] Stop looping through all items to publish the `removeItem` event (#19500) @flaviendelangle
+- [tree view] Support flat DOM structure (#19350) @flaviendelangle
+- [tree view] Update cursor styles for disabled TreeItem (#19548) @sai6855
+
+#### `@mui/x-tree-view-pro@8.11.3` [![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.3`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.11.3`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add styling row group recipe (#19349) @siriwatknp
+- [docs] Group demos data into the dataset folder (#19549) @alexfauquette
+- [docs] Add `shiny` bar chart example at the top  (#19416) @JCQuintas
+
+### Core
+
+- [code-infra] Axios update (#19577) @Janpot
+- [code-infra] Remove usage of copy-files command from code-infra (#19518) @brijeshb42
+- [internal] Fix naming to match convention @oliviertassinari
+
+## 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_

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

@@ -43,11 +43,14 @@ const DateField = exports.DateField = /*#__PURE__*/React.forwardRef(function Dat
     externalForwardedProps: other
   });
   const fieldResponse = (0, _useDateField.useDateField)(textFieldProps);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerFieldUI.PickerFieldUI, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerFieldUI.PickerFieldUIContextProvider, {
     slots: slots,
     slotProps: slotProps,
-    fieldResponse: fieldResponse,
-    defaultOpenPickerIcon: _icons.CalendarIcon
+    inputRef: other.inputRef,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerFieldUI.PickerFieldUI, {
+      fieldResponse: fieldResponse,
+      defaultOpenPickerIcon: _icons.CalendarIcon
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") DateField.displayName = "DateField";

package/DateTimeField/DateTimeField.js

@@ -43,11 +43,14 @@ const DateTimeField = exports.DateTimeField = /*#__PURE__*/React.forwardRef(func
     externalForwardedProps: other
   });
   const fieldResponse = (0, _useDateTimeField.useDateTimeField)(textFieldProps);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerFieldUI.PickerFieldUI, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerFieldUI.PickerFieldUIContextProvider, {
     slots: slots,
     slotProps: slotProps,
-    fieldResponse: fieldResponse,
-    defaultOpenPickerIcon: _icons.CalendarIcon
+    inputRef: other.inputRef,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerFieldUI.PickerFieldUI, {
+      fieldResponse: fieldResponse,
+      defaultOpenPickerIcon: _icons.CalendarIcon
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") DateTimeField.displayName = "DateTimeField";

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

@@ -43,11 +43,14 @@ const TimeField = exports.TimeField = /*#__PURE__*/React.forwardRef(function Tim
     externalForwardedProps: other
   });
   const fieldResponse = (0, _useTimeField.useTimeField)(textFieldProps);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerFieldUI.PickerFieldUI, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerFieldUI.PickerFieldUIContextProvider, {
     slots: slots,
     slotProps: slotProps,
-    fieldResponse: fieldResponse,
-    defaultOpenPickerIcon: _icons.ClockIcon
+    inputRef: other.inputRef,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerFieldUI.PickerFieldUI, {
+      fieldResponse: fieldResponse,
+      defaultOpenPickerIcon: _icons.ClockIcon
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") TimeField.displayName = "TimeField";

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

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import refType from '@mui/utils/refType';
 import { useDateField } from "./useDateField.js";
-import { PickerFieldUI, useFieldTextFieldProps } from "../internals/components/PickerFieldUI.js";
+import { PickerFieldUI, PickerFieldUIContextProvider, useFieldTextFieldProps } from "../internals/components/PickerFieldUI.js";
 import { CalendarIcon } from "../icons/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -36,11 +36,14 @@ const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, inRe
     externalForwardedProps: other
   });
   const fieldResponse = useDateField(textFieldProps);
-  return /*#__PURE__*/_jsx(PickerFieldUI, {
+  return /*#__PURE__*/_jsx(PickerFieldUIContextProvider, {
     slots: slots,
     slotProps: slotProps,
-    fieldResponse: fieldResponse,
-    defaultOpenPickerIcon: CalendarIcon
+    inputRef: other.inputRef,
+    children: /*#__PURE__*/_jsx(PickerFieldUI, {
+      fieldResponse: fieldResponse,
+      defaultOpenPickerIcon: CalendarIcon
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") DateField.displayName = "DateField";

package/esm/DateTimeField/DateTimeField.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import refType from '@mui/utils/refType';
 import { useDateTimeField } from "./useDateTimeField.js";
-import { PickerFieldUI, useFieldTextFieldProps } from "../internals/components/PickerFieldUI.js";
+import { PickerFieldUI, PickerFieldUIContextProvider, useFieldTextFieldProps } from "../internals/components/PickerFieldUI.js";
 import { CalendarIcon } from "../icons/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -36,11 +36,14 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
     externalForwardedProps: other
   });
   const fieldResponse = useDateTimeField(textFieldProps);
-  return /*#__PURE__*/_jsx(PickerFieldUI, {
+  return /*#__PURE__*/_jsx(PickerFieldUIContextProvider, {
     slots: slots,
     slotProps: slotProps,
-    fieldResponse: fieldResponse,
-    defaultOpenPickerIcon: CalendarIcon
+    inputRef: other.inputRef,
+    children: /*#__PURE__*/_jsx(PickerFieldUI, {
+      fieldResponse: fieldResponse,
+      defaultOpenPickerIcon: CalendarIcon
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") DateTimeField.displayName = "DateTimeField";

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

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import refType from '@mui/utils/refType';
 import { useTimeField } from "./useTimeField.js";
-import { PickerFieldUI, useFieldTextFieldProps } from "../internals/components/PickerFieldUI.js";
+import { PickerFieldUI, PickerFieldUIContextProvider, useFieldTextFieldProps } from "../internals/components/PickerFieldUI.js";
 import { ClockIcon } from "../icons/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -36,11 +36,14 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, inRe
     externalForwardedProps: other
   });
   const fieldResponse = useTimeField(textFieldProps);
-  return /*#__PURE__*/_jsx(PickerFieldUI, {
+  return /*#__PURE__*/_jsx(PickerFieldUIContextProvider, {
     slots: slots,
     slotProps: slotProps,
-    fieldResponse: fieldResponse,
-    defaultOpenPickerIcon: ClockIcon
+    inputRef: other.inputRef,
+    children: /*#__PURE__*/_jsx(PickerFieldUI, {
+      fieldResponse: fieldResponse,
+      defaultOpenPickerIcon: ClockIcon
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") TimeField.displayName = "TimeField";

package/esm/index.js

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

package/esm/internals/components/PickerFieldUI.d.ts

@@ -47,16 +47,6 @@ export interface ExportedPickerFieldUIProps {
   openPickerButtonPosition?: 'start' | 'end';
 }
 export interface PickerFieldUIProps<TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>> {
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots?: PickerFieldUISlots;
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps?: PickerFieldUISlotProps;
   /**
    * Object returned by the `useField` hook or one of its wrapper (for example `useDateField`).
    */