@mui/x-date-pickers 8.11.2 → 8.12.0

package/CHANGELOG.md

@@ -5,6 +5,237 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.12.0
+
+_Sep 25, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🤝 Grid-Charts integration
+
+![Grid x Charts](https://github.com/user-attachments/assets/0817c36f-f87f-4688-8f30-fa0db638ca8c)
+
+  👉 [🎥 Watch the full video](https://github.com/user-attachments/assets/28f1848e-dc85-4077-8756-a3e88afd4e54)
+
+- ⌨️ Charts keyboard navigation
+- ⚡️ Charts: Add new `renderer="svg-batch"` prop to Scatter charts that provides improved performance for large datasets
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🧰 Codemod requires Node >=20.19
+
+`@mui/x-codemod` minimum supported Node version is `20.19`.
+This was only the case due to using the v18 `yargs` package; this now explicitly aligns with it. (#18979)
+
+Special thanks go out to the community members for their valuable contributions:
+@deade1e, @sai6855, @thomas-mcdonald
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @flaviendelangle, @Janpot, @JCQuintas, @LukasTy, @michelengelen, @prakhargupta1, @rita-codes, @siriwatknp, @arminmeh, @romgrk
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.12.0`
+
+- [DataGrid] Fix flex column width diff calculation while resizing (#19667) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.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@8.12.0`.
+
+#### `@mui/x-data-grid-premium@8.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@8.12.0`, plus:
+
+- [DataGridPremium] Grid-Charts integration (#18021) @arminmeh
+- [DataGridPremium] Fix sorting and filtering of the tree group columns with aggregation (#19607) @arminmeh
+- [DataGridPremium] Disable aggregation on the grouping column by default (#19692) @arminmeh
+- [DataGridPremium] Do not rely on the group separation constant to retrieve the column name for the charts panel (#19677) @arminmeh
+- [DataGridPremium] Fix stale aggregation state (#19690) @arminmeh
+- [DataGridPremium] Fix pivot column being hidden on autosizing (#19699) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.12.0`
+
+- [pickers] Ensure reference value is not updated for invalid values (#19635) @michelengelen
+- [pickers] Fix `slotProps.textField.slotProps.htmlInput` resolution (#19713) @LukasTy
+- [pickers] Preserve time format when using single column layout on Time Range Picker (#19626) @sai6855
+- [pickers] Preserve time format when using single column layout on Date Time Picker and Date Time Range Picker (#19608) @sai6855
+
+#### `@mui/x-date-pickers-pro@8.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@8.12.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.12.0`
+
+- [charts] Add batch renderer for scatter chart (#19075) @bernardobelchior
+- [charts] Add renderer suffix to performance benchmarks (#19620) @bernardobelchior
+- [charts] Document how plugins can be used (#19343) @alexfauquette
+- [charts] Export chart plugins per series type (#19337) @alexfauquette
+- [charts] Export plugins (#19335) @alexfauquette
+- [charts] Fix horizontal layout and toolbar (#19655) @alexfauquette
+- [charts] Fix performance issue with JS animations (#19606) @bernardobelchior
+- [charts] Fix piecewise scale causing wrong colors in axis with min/max (#19610) @bernardobelchior
+- [charts] Fix zoom discard inconsistency (#19535) @bernardobelchior
+- [charts] Introduce keyboard navigation (#19155) @alexfauquette
+- [charts] Refactor `getAxisExtremum` (#19627) @bernardobelchior
+- [charts] Remove unused code path from `getAxisScale` (#19673) @bernardobelchior
+- [charts] Make new hideLegend prop on ChartWrapper optional (#19694) @thomas-mcdonald
+- [charts] Fix chart crash in test environment (#19711) @JCQuintas
+
+#### `@mui/x-charts-pro@8.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@8.12.0`, plus:
+
+- [charts-pro] Add `valueFormatter` to sankey (#19636) @JCQuintas
+- [charts-pro] Allow `source/target` keywords in sankey link color (#19634) @JCQuintas
+- [charts-pro] Allow exporting `SankeyChart` (#19659) @JCQuintas
+- [charts-pro] Fix axis inversion when using axis `max` and `filterMode: 'discard'` (#19200) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.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@8.12.0`, plus:
+
+- [charts-premium] Grid-Charts integration (#18021) @arminmeh
+
+### Tree View
+
+#### `@mui/x-tree-view@8.12.0`
+
+- [tree view] Allow to pass `null` to the icon slots (#19569) @flaviendelangle
+- [tree view] Fix `apiRef.current.isItemExpanded()` method (#19619) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.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@8.12.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.12.0`
+
+- [codemod] Bump `engines.node` to `>=20.19` to align with `yargs` package (#18979) @LukasTy
+
+### Docs
+
+- [docs] Add missing label to Charts example (#19616) @prakhargupta1
+- [docs] Replace axis type and axis data with a table (#19618) @prakhargupta1
+- [docs] Add Charts example collection page (#18353) @prakhargupta1
+- [docs] Add a Charts demo showcasing bar and scatter composition (#19605) @prakhargupta1
+- [docs] Add composition Charts demo for legends and tooltip (#19602) @prakhargupta1
+- [docs] Add recipe about server-side data export (#19617) @siriwatknp
+- [docs] Clarify DataGrid layout requirements (#19413) @romgrk
+- [docs] Fix `ExportServerSideData` demo layout shift (#19669) @siriwatknp
+- [docs] Improve server-side `updateRow()` description (#19554) @deade1e
+- [docs] Show how to customize drawing area background (#19682) @alexfauquette
+- [docs] Add hook documentation pages (#19334) @Copilot
+
+### Core
+
+- [code-infra] Add copilot instructions specific to x repo (#19623) @JCQuintas
+- [code-infra] Load `tsx` files in visual regression (#19595) @JCQuintas
+- [code-infra] Remove renovate automerge (#19501) @Janpot
+- [code-infra] Update `DEFAULT_TIMESTAMP` format to ISO 8601 (#19624) @Janpot
+- [code-infra] Update `findLatestTaggedVersion` to filter tags based on major version (#19693) @michelengelen
+- [code-infra] Fix changelog generation for charts premium (#19701) @JCQuintas
+- [code-infra] Run prettier on `createReleasePR.mjs` (#19702) @bernardobelchior
+- [code-infra] Make `x-charts-premium` releasable (#18959) @JCQuintas
+- [docs-infra] Ensure `create-playground` script only runs if target file is absent (#19603) @michelengelen
+- [docs-infra] Add @prakhargupta1 as a codeowner of the docs (#19679) @alexfauquette
+
+### Miscellaneous
+
+- [test] Reduce time for wheel zoom test (#19571) @alexfauquette
+- Change `matchPackageNames` to `matchDepNames` for date-fns-v2 @Janpot
+- Remove groupName for date-fns-v2 in renovate.json @Janpot
+
+## 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_

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/DateTimePicker/shared.d.ts

@@ -67,6 +67,7 @@ export interface BaseDateTimePickerProps extends Omit<BasePickerInputProps<Picke
 type UseDateTimePickerDefaultizedProps<Props extends BaseDateTimePickerProps> = LocalizedComponent<Omit<DefaultizedProps<Props, 'openTo' | 'orientation' | 'ampm' | ValidateDateTimePropsToDefault>, 'views'>> & {
   shouldRenderTimeInASingleColumn: boolean;
   views: readonly DateOrTimeViewWithMeridiem[];
+  viewsForFormatting: readonly DateOrTimeViewWithMeridiem[];
 };
 export declare function useDateTimePickerDefaultizedProps<Props extends BaseDateTimePickerProps>(props: Props, name: string): UseDateTimePickerDefaultizedProps<Props>;
 export {};

package/DateTimePicker/shared.js

@@ -51,12 +51,16 @@ function useDateTimePickerDefaultizedProps(props, name) {
     timeSteps: themeProps.timeSteps,
     views: defaultViews
   });
+
+  // Keep the original views for format calculation (before filtering)
+  const viewsForFormatting = ampm ? [...defaultViews, 'meridiem'] : defaultViews;
   return (0, _extends2.default)({}, themeProps, validationProps, {
     timeSteps,
     openTo,
     shouldRenderTimeInASingleColumn,
     thresholdToRenderTimeInASingleColumn,
     views,
+    viewsForFormatting,
     ampm,
     localeText,
     orientation: themeProps.orientation ?? 'portrait',

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -119,7 +119,9 @@ const DesktopDateTimePicker = exports.DesktopDateTimePicker = /*#__PURE__*/React
   // Props with the default values specific to the desktop variant
   const props = (0, _extends2.default)({}, defaultizedProps, {
     viewRenderers,
-    format: (0, _dateTimeUtils.resolveDateTimeFormat)(adapter, defaultizedProps),
+    format: (0, _dateTimeUtils.resolveDateTimeFormat)(adapter, (0, _extends2.default)({}, defaultizedProps, {
+      views: defaultizedProps.viewsForFormatting
+    })),
     views,
     yearsPerRow: defaultizedProps.yearsPerRow ?? 4,
     ampmInClock,

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -65,7 +65,9 @@ const MobileDateTimePicker = exports.MobileDateTimePicker = /*#__PURE__*/React.f
   // Props with the default values specific to the mobile variant
   const props = (0, _extends2.default)({}, defaultizedProps, {
     viewRenderers,
-    format: (0, _dateTimeUtils.resolveDateTimeFormat)(adapter, defaultizedProps),
+    format: (0, _dateTimeUtils.resolveDateTimeFormat)(adapter, (0, _extends2.default)({}, defaultizedProps, {
+      views: defaultizedProps.viewsForFormatting
+    })),
     views,
     ampmInClock,
     slots: (0, _extends2.default)({

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/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/DateTimePicker/shared.d.ts

@@ -67,6 +67,7 @@ export interface BaseDateTimePickerProps extends Omit<BasePickerInputProps<Picke
 type UseDateTimePickerDefaultizedProps<Props extends BaseDateTimePickerProps> = LocalizedComponent<Omit<DefaultizedProps<Props, 'openTo' | 'orientation' | 'ampm' | ValidateDateTimePropsToDefault>, 'views'>> & {
   shouldRenderTimeInASingleColumn: boolean;
   views: readonly DateOrTimeViewWithMeridiem[];
+  viewsForFormatting: readonly DateOrTimeViewWithMeridiem[];
 };
 export declare function useDateTimePickerDefaultizedProps<Props extends BaseDateTimePickerProps>(props: Props, name: string): UseDateTimePickerDefaultizedProps<Props>;
 export {};

package/esm/DateTimePicker/shared.js

@@ -43,12 +43,16 @@ export function useDateTimePickerDefaultizedProps(props, name) {
     timeSteps: themeProps.timeSteps,
     views: defaultViews
   });
+
+  // Keep the original views for format calculation (before filtering)
+  const viewsForFormatting = ampm ? [...defaultViews, 'meridiem'] : defaultViews;
   return _extends({}, themeProps, validationProps, {
     timeSteps,
     openTo,
     shouldRenderTimeInASingleColumn,
     thresholdToRenderTimeInASingleColumn,
     views,
+    viewsForFormatting,
     ampm,
     localeText,
     orientation: themeProps.orientation ?? 'portrait',

package/esm/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -112,7 +112,9 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
   // Props with the default values specific to the desktop variant
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
-    format: resolveDateTimeFormat(adapter, defaultizedProps),
+    format: resolveDateTimeFormat(adapter, _extends({}, defaultizedProps, {
+      views: defaultizedProps.viewsForFormatting
+    })),
     views,
     yearsPerRow: defaultizedProps.yearsPerRow ?? 4,
     ampmInClock,

package/esm/MobileDateTimePicker/MobileDateTimePicker.js

@@ -58,7 +58,9 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
   // Props with the default values specific to the mobile variant
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
-    format: resolveDateTimeFormat(adapter, defaultizedProps),
+    format: resolveDateTimeFormat(adapter, _extends({}, defaultizedProps, {
+      views: defaultizedProps.viewsForFormatting
+    })),
     views,
     ampmInClock,
     slots: _extends({

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.2
+ * @mui/x-date-pickers v8.12.0
  *
  * @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`).
    */

package/esm/internals/components/PickerFieldUI.js

@@ -123,8 +123,6 @@ export const PickerFieldUIContext = /*#__PURE__*/React.createContext({
 if (process.env.NODE_ENV !== "production") PickerFieldUIContext.displayName = "PickerFieldUIContext";
 export function PickerFieldUI(props) {
   const {
-    slots,
-    slotProps,
     fieldResponse,
     defaultOpenPickerIcon
   } = props;
@@ -147,11 +145,11 @@ export function PickerFieldUI(props) {
   const triggerStatus = pickerContext ? pickerContext.triggerStatus : 'hidden';
   const clearButtonPosition = clearable ? clearButtonPositionProp : null;
   const openPickerButtonPosition = triggerStatus !== 'hidden' ? openPickerButtonPositionProp : null;
-  const TextField = slots?.textField ?? pickerFieldUIContext.slots.textField ?? (fieldResponse.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
-  const InputAdornment = slots?.inputAdornment ?? pickerFieldUIContext.slots.inputAdornment ?? MuiInputAdornment;
+  const TextField = pickerFieldUIContext.slots.textField ?? (fieldResponse.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
+  const InputAdornment = pickerFieldUIContext.slots.inputAdornment ?? MuiInputAdornment;
   const _useSlotProps = useSlotProps({
       elementType: InputAdornment,
-      externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.inputAdornment, slotProps?.inputAdornment),
+      externalSlotProps: pickerFieldUIContext.slotProps.inputAdornment,
       additionalProps: {
         position: 'start'
       },
@@ -162,7 +160,7 @@ export function PickerFieldUI(props) {
     startInputAdornmentProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded4);
   const _useSlotProps2 = useSlotProps({
       elementType: InputAdornment,
-      externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.inputAdornment, slotProps?.inputAdornment),
+      externalSlotProps: pickerFieldUIContext.slotProps.inputAdornment,
       additionalProps: {
         position: 'end'
       },
@@ -193,11 +191,11 @@ export function PickerFieldUI(props) {
     externalSlotProps: pickerFieldUIContext.slotProps.openPickerIcon,
     ownerState
   });
-  const ClearButton = slots?.clearButton ?? pickerFieldUIContext.slots.clearButton ?? MuiIconButton;
+  const ClearButton = pickerFieldUIContext.slots.clearButton ?? MuiIconButton;
   // We don't want to forward the `ownerState` to the `<IconButton />` component, see mui/material-ui#34056
   const _useSlotProps4 = useSlotProps({
       elementType: ClearButton,
-      externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.clearButton, slotProps?.clearButton),
+      externalSlotProps: pickerFieldUIContext.slotProps.clearButton,
       className: 'clearButton',
       additionalProps: {
         title: translations.fieldClearLabel,
@@ -211,10 +209,10 @@ export function PickerFieldUI(props) {
       ownerState
     }),
     clearButtonProps = _objectWithoutPropertiesLoose(_useSlotProps4, _excluded7);
-  const ClearIcon = slots?.clearIcon ?? pickerFieldUIContext.slots.clearIcon ?? MuiClearIcon;
+  const ClearIcon = pickerFieldUIContext.slots.clearIcon ?? MuiClearIcon;
   const clearIconProps = useSlotProps({
     elementType: ClearIcon,
-    externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.clearIcon, slotProps?.clearIcon),
+    externalSlotProps: pickerFieldUIContext.slotProps.clearIcon,
     additionalProps: {
       fontSize: 'small'
     },
@@ -244,6 +242,10 @@ export function PickerFieldUI(props) {
       }))]
     }));
   }
+  // handle the case of showing custom `inputAdornment` for Field components
+  if (!additionalTextFieldInputProps?.endAdornment && !additionalTextFieldInputProps?.startAdornment && pickerFieldUIContext.slots.inputAdornment) {
+    additionalTextFieldInputProps.endAdornment = /*#__PURE__*/_jsx(InputAdornment, _extends({}, endInputAdornmentProps));
+  }
   if (clearButtonPosition != null) {
     textFieldProps.sx = [{
       '& .clearButton': {
@@ -263,6 +265,9 @@ export function PickerFieldUI(props) {
   }
   const resolvedTextFieldInputProps = materialMajor >= 6 && textFieldProps?.slotProps?.input ? resolveComponentProps(mergeSlotProps(textFieldInputProps, additionalTextFieldInputProps), ownerState) : _extends({}, textFieldInputProps, additionalTextFieldInputProps);
 
+  // We need to resolve the `inputProps` since we are messing with those props in this component.
+  textFieldProps.inputProps = materialMajor >= 6 && textFieldProps?.slotProps?.htmlInput ? resolveComponentProps(textFieldProps.slotProps.htmlInput, ownerState) : textFieldProps.inputProps;
+
   // 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;

package/esm/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -8,7 +8,6 @@ import { PickerPopper } from "../../components/PickerPopper/PickerPopper.js";
 import { usePicker } from "../usePicker/index.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
 import { PickerProvider } from "../../components/PickerProvider.js";
-import { PickerFieldUIContextProvider } from "../../components/PickerFieldUI.js";
 import { createNonRangePickerStepNavigation } from "../../utils/createNonRangePickerStepNavigation.js";
 
 /**
@@ -75,21 +74,20 @@ export const useDesktopPicker = _ref => {
       'aria-labelledby': labelledById
     }, innerSlotProps?.popper)
   });
-  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-    children: /*#__PURE__*/_jsxs(PickerFieldUIContextProvider, {
+  const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
+    children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
       slots: slots,
       slotProps: slotProps,
-      inputRef: inputRef,
-      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps)), /*#__PURE__*/_jsx(PickerPopper, {
+      inputRef: inputRef
+    })), /*#__PURE__*/_jsx(PickerPopper, {
+      slots: slots,
+      slotProps: slotProps,
+      children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
         slots: slots,
         slotProps: slotProps,
-        children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
-          slots: slots,
-          slotProps: slotProps,
-          children: renderCurrentView()
-        }))
-      })]
-    })
+        children: renderCurrentView()
+      }))
+    })]
   }));
   if (process.env.NODE_ENV !== "production") renderPicker.displayName = "renderPicker";
   return {

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

@@ -305,8 +305,9 @@ export const useFieldState = parameters => {
 
   // If `prop.value` changes, we update the state to reflect the new value
   if (value !== state.lastExternalValue) {
+    const isActiveDateInvalid = sectionToUpdateOnNextInvalidDateRef.current != null && !adapter.isValid(fieldValueManager.getDateFromSection(value, state.sections[sectionToUpdateOnNextInvalidDateRef.current.sectionIndex]));
     let sections;
-    if (sectionToUpdateOnNextInvalidDateRef.current != null && !adapter.isValid(fieldValueManager.getDateFromSection(value, state.sections[sectionToUpdateOnNextInvalidDateRef.current.sectionIndex]))) {
+    if (isActiveDateInvalid) {
       sections = setSectionValue(sectionToUpdateOnNextInvalidDateRef.current.sectionIndex, sectionToUpdateOnNextInvalidDateRef.current.value);
     } else {
       sections = getSectionsFromValue(value);
@@ -319,7 +320,7 @@ export const useFieldState = parameters => {
         isRtl,
         locale: adapter.locale
       },
-      referenceValue: fieldValueManager.updateReferenceValue(adapter, value, prevState.referenceValue),
+      referenceValue: isActiveDateInvalid ? prevState.referenceValue : fieldValueManager.updateReferenceValue(adapter, value, prevState.referenceValue),
       tempValueStrAndroid: null
     }));
   }

package/esm/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -8,7 +8,6 @@ import { PickersModalDialog } from "../../components/PickersModalDialog.js";
 import { usePicker } from "../usePicker/index.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
 import { PickerProvider } from "../../components/PickerProvider.js";
-import { PickerFieldUIContextProvider } from "../../components/PickerFieldUI.js";
 import { createNonRangePickerStepNavigation } from "../../utils/createNonRangePickerStepNavigation.js";
 
 /**
@@ -75,21 +74,20 @@ export const useMobilePicker = _ref => {
       'aria-labelledby': labelledById
     }, innerSlotProps?.mobilePaper)
   });
-  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-    children: /*#__PURE__*/_jsxs(PickerFieldUIContextProvider, {
+  const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
+    children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
       slots: slots,
       slotProps: slotProps,
-      inputRef: inputRef,
-      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
+      inputRef: inputRef
+    })), /*#__PURE__*/_jsx(PickersModalDialog, {
+      slots: slots,
+      slotProps: slotProps,
+      children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
         slots: slots,
         slotProps: slotProps,
-        children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
-          slots: slots,
-          slotProps: slotProps,
-          children: renderCurrentView()
-        }))
-      })]
-    })
+        children: renderCurrentView()
+      }))
+    })]
   }));
   if (process.env.NODE_ENV !== "production") renderPicker.displayName = "renderPicker";
   return {

package/index.js

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

package/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`).
    */

package/internals/components/PickerFieldUI.js

@@ -136,8 +136,6 @@ const PickerFieldUIContext = exports.PickerFieldUIContext = /*#__PURE__*/React.c
 if (process.env.NODE_ENV !== "production") PickerFieldUIContext.displayName = "PickerFieldUIContext";
 function PickerFieldUI(props) {
   const {
-    slots,
-    slotProps,
     fieldResponse,
     defaultOpenPickerIcon
   } = props;
@@ -160,11 +158,11 @@ function PickerFieldUI(props) {
   const triggerStatus = pickerContext ? pickerContext.triggerStatus : 'hidden';
   const clearButtonPosition = clearable ? clearButtonPositionProp : null;
   const openPickerButtonPosition = triggerStatus !== 'hidden' ? openPickerButtonPositionProp : null;
-  const TextField = slots?.textField ?? pickerFieldUIContext.slots.textField ?? (fieldResponse.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
-  const InputAdornment = slots?.inputAdornment ?? pickerFieldUIContext.slots.inputAdornment ?? _InputAdornment.default;
+  const TextField = pickerFieldUIContext.slots.textField ?? (fieldResponse.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
+  const InputAdornment = pickerFieldUIContext.slots.inputAdornment ?? _InputAdornment.default;
   const _useSlotProps = (0, _useSlotProps5.default)({
       elementType: InputAdornment,
-      externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.inputAdornment, slotProps?.inputAdornment),
+      externalSlotProps: pickerFieldUIContext.slotProps.inputAdornment,
       additionalProps: {
         position: 'start'
       },
@@ -175,7 +173,7 @@ function PickerFieldUI(props) {
     startInputAdornmentProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded4);
   const _useSlotProps2 = (0, _useSlotProps5.default)({
       elementType: InputAdornment,
-      externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.inputAdornment, slotProps?.inputAdornment),
+      externalSlotProps: pickerFieldUIContext.slotProps.inputAdornment,
       additionalProps: {
         position: 'end'
       },
@@ -206,11 +204,11 @@ function PickerFieldUI(props) {
     externalSlotProps: pickerFieldUIContext.slotProps.openPickerIcon,
     ownerState
   });
-  const ClearButton = slots?.clearButton ?? pickerFieldUIContext.slots.clearButton ?? _IconButton.default;
+  const ClearButton = pickerFieldUIContext.slots.clearButton ?? _IconButton.default;
   // We don't want to forward the `ownerState` to the `<IconButton />` component, see mui/material-ui#34056
   const _useSlotProps4 = (0, _useSlotProps5.default)({
       elementType: ClearButton,
-      externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.clearButton, slotProps?.clearButton),
+      externalSlotProps: pickerFieldUIContext.slotProps.clearButton,
       className: 'clearButton',
       additionalProps: {
         title: translations.fieldClearLabel,
@@ -224,10 +222,10 @@ function PickerFieldUI(props) {
       ownerState
     }),
     clearButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps4, _excluded7);
-  const ClearIcon = slots?.clearIcon ?? pickerFieldUIContext.slots.clearIcon ?? _icons.ClearIcon;
+  const ClearIcon = pickerFieldUIContext.slots.clearIcon ?? _icons.ClearIcon;
   const clearIconProps = (0, _useSlotProps5.default)({
     elementType: ClearIcon,
-    externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.clearIcon, slotProps?.clearIcon),
+    externalSlotProps: pickerFieldUIContext.slotProps.clearIcon,
     additionalProps: {
       fontSize: 'small'
     },
@@ -257,6 +255,10 @@ function PickerFieldUI(props) {
       }))]
     }));
   }
+  // handle the case of showing custom `inputAdornment` for Field components
+  if (!additionalTextFieldInputProps?.endAdornment && !additionalTextFieldInputProps?.startAdornment && pickerFieldUIContext.slots.inputAdornment) {
+    additionalTextFieldInputProps.endAdornment = /*#__PURE__*/(0, _jsxRuntime.jsx)(InputAdornment, (0, _extends2.default)({}, endInputAdornmentProps));
+  }
   if (clearButtonPosition != null) {
     textFieldProps.sx = [{
       '& .clearButton': {
@@ -276,6 +278,9 @@ function PickerFieldUI(props) {
   }
   const resolvedTextFieldInputProps = _version.major >= 6 && textFieldProps?.slotProps?.input ? (0, _resolveComponentProps.default)(mergeSlotProps(textFieldInputProps, additionalTextFieldInputProps), ownerState) : (0, _extends2.default)({}, textFieldInputProps, additionalTextFieldInputProps);
 
+  // We need to resolve the `inputProps` since we are messing with those props in this component.
+  textFieldProps.inputProps = _version.major >= 6 && textFieldProps?.slotProps?.htmlInput ? (0, _resolveComponentProps.default)(textFieldProps.slotProps.htmlInput, ownerState) : textFieldProps.inputProps;
+
   // 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;

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -14,7 +14,6 @@ var _PickerPopper = require("../../components/PickerPopper/PickerPopper");
 var _usePicker = require("../usePicker");
 var _PickersLayout = require("../../../PickersLayout");
 var _PickerProvider = require("../../components/PickerProvider");
-var _PickerFieldUI = require("../../components/PickerFieldUI");
 var _createNonRangePickerStepNavigation = require("../../utils/createNonRangePickerStepNavigation");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["props", "steps"],
@@ -82,21 +81,20 @@ const useDesktopPicker = _ref => {
       'aria-labelledby': labelledById
     }, innerSlotProps?.popper)
   });
-  const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickerFieldUI.PickerFieldUIContextProvider, {
+  const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps, {
       slots: slots,
       slotProps: slotProps,
-      inputRef: inputRef,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerPopper.PickerPopper, {
+      inputRef: inputRef
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerPopper.PickerPopper, {
+      slots: slots,
+      slotProps: slotProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {
         slots: slots,
         slotProps: slotProps,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {
-          slots: slots,
-          slotProps: slotProps,
-          children: renderCurrentView()
-        }))
-      })]
-    })
+        children: renderCurrentView()
+      }))
+    })]
   }));
   if (process.env.NODE_ENV !== "production") renderPicker.displayName = "renderPicker";
   return {

package/internals/hooks/useField/useFieldState.js

@@ -312,8 +312,9 @@ const useFieldState = parameters => {
 
   // If `prop.value` changes, we update the state to reflect the new value
   if (value !== state.lastExternalValue) {
+    const isActiveDateInvalid = sectionToUpdateOnNextInvalidDateRef.current != null && !adapter.isValid(fieldValueManager.getDateFromSection(value, state.sections[sectionToUpdateOnNextInvalidDateRef.current.sectionIndex]));
     let sections;
-    if (sectionToUpdateOnNextInvalidDateRef.current != null && !adapter.isValid(fieldValueManager.getDateFromSection(value, state.sections[sectionToUpdateOnNextInvalidDateRef.current.sectionIndex]))) {
+    if (isActiveDateInvalid) {
       sections = setSectionValue(sectionToUpdateOnNextInvalidDateRef.current.sectionIndex, sectionToUpdateOnNextInvalidDateRef.current.value);
     } else {
       sections = getSectionsFromValue(value);
@@ -326,7 +327,7 @@ const useFieldState = parameters => {
         isRtl,
         locale: adapter.locale
       },
-      referenceValue: fieldValueManager.updateReferenceValue(adapter, value, prevState.referenceValue),
+      referenceValue: isActiveDateInvalid ? prevState.referenceValue : fieldValueManager.updateReferenceValue(adapter, value, prevState.referenceValue),
       tempValueStrAndroid: null
     }));
   }

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -14,7 +14,6 @@ var _PickersModalDialog = require("../../components/PickersModalDialog");
 var _usePicker = require("../usePicker");
 var _PickersLayout = require("../../../PickersLayout");
 var _PickerProvider = require("../../components/PickerProvider");
-var _PickerFieldUI = require("../../components/PickerFieldUI");
 var _createNonRangePickerStepNavigation = require("../../utils/createNonRangePickerStepNavigation");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["props", "steps"],
@@ -82,21 +81,20 @@ const useMobilePicker = _ref => {
       'aria-labelledby': labelledById
     }, innerSlotProps?.mobilePaper)
   });
-  const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickerFieldUI.PickerFieldUIContextProvider, {
+  const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps, {
       slots: slots,
       slotProps: slotProps,
-      inputRef: inputRef,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersModalDialog.PickersModalDialog, {
+      inputRef: inputRef
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersModalDialog.PickersModalDialog, {
+      slots: slots,
+      slotProps: slotProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {
         slots: slots,
         slotProps: slotProps,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {
-          slots: slots,
-          slotProps: slotProps,
-          children: renderCurrentView()
-        }))
-      })]
-    })
+        children: renderCurrentView()
+      }))
+    })]
   }));
   if (process.env.NODE_ENV !== "production") renderPicker.displayName = "renderPicker";
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "8.11.2",
+  "version": "8.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": "8.11.2"
+    "@mui/x-internals": "8.12.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",