@mui/x-date-pickers-pro 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/DateRangeCalendar/DateRangeCalendar.js

@@ -37,7 +37,7 @@ var _DateRangePickerDay2 = require("../DateRangePickerDay2");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "classes", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "focusedView", "onFocusedViewChange", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
-const releaseInfo = "MTc1NzQ2MjQwMDAwMA==";
+const releaseInfo = "MTc1ODc1MTIwMDAwMA==";
 const DateRangeCalendarRoot = (0, _styles.styled)('div', {
   name: 'MuiDateRangeCalendar',
   slot: 'Root'

package/DateRangePickerDay/DateRangePickerDay.js

@@ -235,7 +235,7 @@ const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePi
       showDaysOutsideCurrentMonth
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  (0, _xLicense.useLicenseVerifier)('x-date-pickers-pro', "MTc1NzQ2MjQwMDAwMA==");
+  (0, _xLicense.useLicenseVerifier)('x-date-pickers-pro', "MTc1ODc1MTIwMDAwMA==");
   const adapter = (0, _hooks.usePickerAdapter)();
   const shouldRenderHighlight = isHighlighting && !outsideCurrentMonth;
   const shouldRenderPreview = isPreviewing && !outsideCurrentMonth;

package/DateTimeRangePicker/shared.d.ts

@@ -58,6 +58,7 @@ export interface BaseDateTimeRangePickerProps extends Omit<BasePickerInputProps<
 type UseDateTimeRangePickerDefaultizedProps<Props extends BaseDateTimeRangePickerProps> = LocalizedComponent<Omit<DefaultizedProps<Props, 'openTo' | 'ampm' | ValidateDateTimeRangePropsToDefault>, 'views'>> & {
   shouldRenderTimeInASingleColumn: boolean;
   views: readonly DateTimeRangePickerView[];
+  viewsForFormatting: readonly DateOrTimeViewWithMeridiem[];
 };
 export declare function useDateTimeRangePickerDefaultizedProps<Props extends BaseDateTimeRangePickerProps>(props: Props, name: string): UseDateTimeRangePickerDefaultizedProps<Props>;
 export {};

package/DateTimeRangePicker/shared.js

@@ -39,12 +39,16 @@ function useDateTimeRangePickerDefaultizedProps(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,
     slots: (0, _extends2.default)({
       tabs: _DateTimeRangePickerTabs.DateTimeRangePickerTabs,

package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -122,7 +122,9 @@ const DesktopDateTimeRangePicker = exports.DesktopDateTimeRangePicker = /*#__PUR
   const props = (0, _extends2.default)({}, defaultizedProps, {
     views,
     viewRenderers,
-    format: (0, _internals.resolveDateTimeFormat)(adapter, defaultizedProps, true),
+    format: (0, _internals.resolveDateTimeFormat)(adapter, (0, _extends2.default)({}, defaultizedProps, {
+      views: defaultizedProps.viewsForFormatting
+    }), true),
     // force true to correctly handle `renderTimeViewClock` as a renderer
     ampmInClock: true,
     calendars: defaultizedProps.calendars ?? 1,

package/DesktopTimeRangePicker/DesktopTimeRangePicker.js

@@ -87,7 +87,9 @@ const DesktopTimeRangePicker = exports.DesktopTimeRangePicker = /*#__PURE__*/Rea
     views,
     viewRenderers,
     ampmInClock: true,
-    format: (0, _internals.resolveTimeFormat)(adapter, defaultizedProps),
+    format: (0, _internals.resolveTimeFormat)(adapter, (0, _extends2.default)({}, defaultizedProps, {
+      views: defaultizedProps.viewsForFormatting
+    })),
     slots: (0, _extends2.default)({
       field: _SingleInputTimeRangeField.SingleInputTimeRangeField
     }, defaultizedProps.slots),

package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -125,7 +125,9 @@ const MobileDateTimeRangePicker = exports.MobileDateTimeRangePicker = /*#__PURE_
   }, defaultizedProps.viewRenderers);
   const props = (0, _extends2.default)({}, defaultizedProps, {
     viewRenderers,
-    format: (0, _internals.resolveDateTimeFormat)(adapter, defaultizedProps, true),
+    format: (0, _internals.resolveDateTimeFormat)(adapter, (0, _extends2.default)({}, defaultizedProps, {
+      views: defaultizedProps.viewsForFormatting
+    }), true),
     // Force one calendar on mobile to avoid layout issues
     calendars: 1,
     // force true to correctly handle `renderTimeViewClock` as a renderer

package/MobileTimeRangePicker/MobileTimeRangePicker.js

@@ -85,7 +85,9 @@ const MobileTimeRangePicker = exports.MobileTimeRangePicker = /*#__PURE__*/React
   const props = (0, _extends2.default)({}, defaultizedProps, {
     ampmInClock: true,
     viewRenderers,
-    format: (0, _internals.resolveTimeFormat)(adapter, defaultizedProps),
+    format: (0, _internals.resolveTimeFormat)(adapter, (0, _extends2.default)({}, defaultizedProps, {
+      views: defaultizedProps.viewsForFormatting
+    })),
     slots: (0, _extends2.default)({
       field: _SingleInputTimeRangeField.SingleInputTimeRangeField
     }, defaultizedProps.slots),

package/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -43,11 +43,14 @@ const SingleInputDateRangeField = exports.SingleInputDateRangeField = /*#__PURE_
     externalForwardedProps: other
   });
   const fieldResponse = (0, _useSingleInputDateRangeField.useSingleInputDateRangeField)(textFieldProps);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerFieldUI, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerFieldUIContextProvider, {
     slots: slots,
     slotProps: slotProps,
-    fieldResponse: fieldResponse,
-    defaultOpenPickerIcon: _icons.DateRangeIcon
+    inputRef: other.inputRef,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerFieldUI, {
+      fieldResponse: fieldResponse,
+      defaultOpenPickerIcon: _icons.DateRangeIcon
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") SingleInputDateRangeField.displayName = "SingleInputDateRangeField";

package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -43,11 +43,14 @@ const SingleInputDateTimeRangeField = exports.SingleInputDateTimeRangeField = /*
     externalForwardedProps: other
   });
   const fieldResponse = (0, _useSingleInputDateTimeRangeField.useSingleInputDateTimeRangeField)(textFieldProps);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerFieldUI, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerFieldUIContextProvider, {
     slots: slots,
     slotProps: slotProps,
-    fieldResponse: fieldResponse,
-    defaultOpenPickerIcon: _icons.DateRangeIcon
+    inputRef: other.inputRef,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerFieldUI, {
+      fieldResponse: fieldResponse,
+      defaultOpenPickerIcon: _icons.DateRangeIcon
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") SingleInputDateTimeRangeField.displayName = "SingleInputDateTimeRangeField";

package/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -43,11 +43,14 @@ const SingleInputTimeRangeField = exports.SingleInputTimeRangeField = /*#__PURE_
     externalForwardedProps: other
   });
   const fieldResponse = (0, _useSingleInputTimeRangeField.useSingleInputTimeRangeField)(textFieldProps);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerFieldUI, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerFieldUIContextProvider, {
     slots: slots,
     slotProps: slotProps,
-    fieldResponse: fieldResponse,
-    defaultOpenPickerIcon: _icons.ClockIcon
+    inputRef: other.inputRef,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerFieldUI, {
+      fieldResponse: fieldResponse,
+      defaultOpenPickerIcon: _icons.ClockIcon
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") SingleInputTimeRangeField.displayName = "SingleInputTimeRangeField";

package/TimeRangePicker/shared.d.ts

@@ -68,6 +68,7 @@ export interface BaseTimeRangePickerProps extends Omit<BasePickerInputProps<Pick
 type UseTimeRangePickerDefaultizedProps<Props extends BaseTimeRangePickerProps> = LocalizedComponent<Omit<DefaultizedProps<Props, 'views' | 'openTo' | 'ampm' | keyof BaseTimeValidationProps>, 'views'>> & {
   shouldRenderTimeInASingleColumn: boolean;
   views: readonly TimeViewWithMeridiem[];
+  viewsForFormatting: readonly TimeViewWithMeridiem[];
 };
 export declare function useTimeRangePickerDefaultizedProps<Props extends BaseTimeRangePickerProps>(props: Props, name: string): UseTimeRangePickerDefaultizedProps<Props>;
 export {};

package/TimeRangePicker/shared.js

@@ -49,6 +49,9 @@ function useTimeRangePickerDefaultizedProps(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, {
     localeText,
     timeSteps,
@@ -56,6 +59,7 @@ function useTimeRangePickerDefaultizedProps(props, name) {
     shouldRenderTimeInASingleColumn,
     thresholdToRenderTimeInASingleColumn,
     views,
+    viewsForFormatting,
     ampm,
     slots: (0, _extends2.default)({
       tabs: _TimeRangePickerTabs.TimeRangePickerTabs,

package/esm/DateRangeCalendar/DateRangeCalendar.js

@@ -30,7 +30,7 @@ import { PickersRangeCalendarHeader } from "../PickersRangeCalendarHeader/index.
 import { useNullablePickerRangePositionContext } from "../internals/hooks/useNullablePickerRangePositionContext.js";
 import { dateRangePickerDay2Classes } from "../DateRangePickerDay2/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc1NzQ2MjQwMDAwMA==";
+const releaseInfo = "MTc1ODc1MTIwMDAwMA==";
 const DateRangeCalendarRoot = styled('div', {
   name: 'MuiDateRangeCalendar',
   slot: 'Root'

package/esm/DateRangePickerDay/DateRangePickerDay.js

@@ -228,7 +228,7 @@ const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePi
       showDaysOutsideCurrentMonth
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  useLicenseVerifier('x-date-pickers-pro', "MTc1NzQ2MjQwMDAwMA==");
+  useLicenseVerifier('x-date-pickers-pro', "MTc1ODc1MTIwMDAwMA==");
   const adapter = usePickerAdapter();
   const shouldRenderHighlight = isHighlighting && !outsideCurrentMonth;
   const shouldRenderPreview = isPreviewing && !outsideCurrentMonth;

package/esm/DateTimeRangePicker/shared.d.ts

@@ -58,6 +58,7 @@ export interface BaseDateTimeRangePickerProps extends Omit<BasePickerInputProps<
 type UseDateTimeRangePickerDefaultizedProps<Props extends BaseDateTimeRangePickerProps> = LocalizedComponent<Omit<DefaultizedProps<Props, 'openTo' | 'ampm' | ValidateDateTimeRangePropsToDefault>, 'views'>> & {
   shouldRenderTimeInASingleColumn: boolean;
   views: readonly DateTimeRangePickerView[];
+  viewsForFormatting: readonly DateOrTimeViewWithMeridiem[];
 };
 export declare function useDateTimeRangePickerDefaultizedProps<Props extends BaseDateTimeRangePickerProps>(props: Props, name: string): UseDateTimeRangePickerDefaultizedProps<Props>;
 export {};

package/esm/DateTimeRangePicker/shared.js

@@ -32,12 +32,16 @@ export function useDateTimeRangePickerDefaultizedProps(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,
     slots: _extends({
       tabs: DateTimeRangePickerTabs,

package/esm/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -115,7 +115,9 @@ const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
   const props = _extends({}, defaultizedProps, {
     views,
     viewRenderers,
-    format: resolveDateTimeFormat(adapter, defaultizedProps, true),
+    format: resolveDateTimeFormat(adapter, _extends({}, defaultizedProps, {
+      views: defaultizedProps.viewsForFormatting
+    }), true),
     // force true to correctly handle `renderTimeViewClock` as a renderer
     ampmInClock: true,
     calendars: defaultizedProps.calendars ?? 1,

package/esm/DesktopTimeRangePicker/DesktopTimeRangePicker.js

@@ -80,7 +80,9 @@ const DesktopTimeRangePicker = /*#__PURE__*/React.forwardRef(function DesktopTim
     views,
     viewRenderers,
     ampmInClock: true,
-    format: resolveTimeFormat(adapter, defaultizedProps),
+    format: resolveTimeFormat(adapter, _extends({}, defaultizedProps, {
+      views: defaultizedProps.viewsForFormatting
+    })),
     slots: _extends({
       field: SingleInputTimeRangeField
     }, defaultizedProps.slots),

package/esm/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -118,7 +118,9 @@ const MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileD
   }, defaultizedProps.viewRenderers);
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
-    format: resolveDateTimeFormat(adapter, defaultizedProps, true),
+    format: resolveDateTimeFormat(adapter, _extends({}, defaultizedProps, {
+      views: defaultizedProps.viewsForFormatting
+    }), true),
     // Force one calendar on mobile to avoid layout issues
     calendars: 1,
     // force true to correctly handle `renderTimeViewClock` as a renderer

package/esm/MobileTimeRangePicker/MobileTimeRangePicker.js

@@ -78,7 +78,9 @@ const MobileTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileTimeR
   const props = _extends({}, defaultizedProps, {
     ampmInClock: true,
     viewRenderers,
-    format: resolveTimeFormat(adapter, defaultizedProps),
+    format: resolveTimeFormat(adapter, _extends({}, defaultizedProps, {
+      views: defaultizedProps.viewsForFormatting
+    })),
     slots: _extends({
       field: SingleInputTimeRangeField
     }, defaultizedProps.slots),

package/esm/SingleInputDateRangeField/SingleInputDateRangeField.js

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

package/esm/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -5,7 +5,7 @@ const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DateRangeIcon } from '@mui/x-date-pickers/icons';
-import { PickerFieldUI, useFieldTextFieldProps } from '@mui/x-date-pickers/internals';
+import { PickerFieldUI, PickerFieldUIContextProvider, useFieldTextFieldProps } from '@mui/x-date-pickers/internals';
 import { useThemeProps } from '@mui/material/styles';
 import refType from '@mui/utils/refType';
 import { useSingleInputDateTimeRangeField } from "./useSingleInputDateTimeRangeField.js";
@@ -36,11 +36,14 @@ const SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Sin
     externalForwardedProps: other
   });
   const fieldResponse = useSingleInputDateTimeRangeField(textFieldProps);
-  return /*#__PURE__*/_jsx(PickerFieldUI, {
+  return /*#__PURE__*/_jsx(PickerFieldUIContextProvider, {
     slots: slots,
     slotProps: slotProps,
-    fieldResponse: fieldResponse,
-    defaultOpenPickerIcon: DateRangeIcon
+    inputRef: other.inputRef,
+    children: /*#__PURE__*/_jsx(PickerFieldUI, {
+      fieldResponse: fieldResponse,
+      defaultOpenPickerIcon: DateRangeIcon
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") SingleInputDateTimeRangeField.displayName = "SingleInputDateTimeRangeField";

package/esm/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -5,7 +5,7 @@ const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ClockIcon } from '@mui/x-date-pickers/icons';
-import { PickerFieldUI, useFieldTextFieldProps } from '@mui/x-date-pickers/internals';
+import { PickerFieldUI, PickerFieldUIContextProvider, useFieldTextFieldProps } from '@mui/x-date-pickers/internals';
 import { useThemeProps } from '@mui/material/styles';
 import refType from '@mui/utils/refType';
 import { useSingleInputTimeRangeField } from "./useSingleInputTimeRangeField.js";
@@ -36,11 +36,14 @@ const SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleI
     externalForwardedProps: other
   });
   const fieldResponse = useSingleInputTimeRangeField(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") SingleInputTimeRangeField.displayName = "SingleInputTimeRangeField";

package/esm/TimeRangePicker/shared.d.ts

@@ -68,6 +68,7 @@ export interface BaseTimeRangePickerProps extends Omit<BasePickerInputProps<Pick
 type UseTimeRangePickerDefaultizedProps<Props extends BaseTimeRangePickerProps> = LocalizedComponent<Omit<DefaultizedProps<Props, 'views' | 'openTo' | 'ampm' | keyof BaseTimeValidationProps>, 'views'>> & {
   shouldRenderTimeInASingleColumn: boolean;
   views: readonly TimeViewWithMeridiem[];
+  viewsForFormatting: readonly TimeViewWithMeridiem[];
 };
 export declare function useTimeRangePickerDefaultizedProps<Props extends BaseTimeRangePickerProps>(props: Props, name: string): UseTimeRangePickerDefaultizedProps<Props>;
 export {};

package/esm/TimeRangePicker/shared.js

@@ -41,6 +41,9 @@ export function useTimeRangePickerDefaultizedProps(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, {
     localeText,
     timeSteps,
@@ -48,6 +51,7 @@ export function useTimeRangePickerDefaultizedProps(props, name) {
     shouldRenderTimeInASingleColumn,
     thresholdToRenderTimeInASingleColumn,
     views,
+    viewsForFormatting,
     ampm,
     slots: _extends({
       tabs: TimeRangePickerTabs,

package/esm/index.js

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

package/esm/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -7,7 +7,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useLicenseVerifier } from '@mui/x-license';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
-import { usePicker, PickerPopper, PickerProvider, PickerFieldUIContextProvider } from '@mui/x-date-pickers/internals';
+import { usePicker, PickerPopper, PickerProvider } from '@mui/x-date-pickers/internals';
 import { useRangePosition } from "../useRangePosition.js";
 import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
 import { getRangeFieldType } from "../../utils/date-fields-utils.js";
@@ -19,7 +19,7 @@ export const useDesktopRangePicker = _ref => {
       steps
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
-  useLicenseVerifier('x-date-pickers-pro', "MTc1NzQ2MjQwMDAwMA==");
+  useLicenseVerifier('x-date-pickers-pro', "MTc1ODc1MTIwMDAwMA==");
   const {
     slots,
     slotProps,
@@ -27,7 +27,8 @@ export const useDesktopRangePicker = _ref => {
     localeText
   } = props;
   const fieldType = getRangeFieldType(slots.field);
-  const viewContainerRole = fieldType === 'single-input' ? 'dialog' : 'tooltip';
+  const isSingleInput = fieldType === 'single-input';
+  const viewContainerRole = isSingleInput ? 'dialog' : 'tooltip';
   const rangePositionResponse = useRangePosition(props);
   const getStepNavigation = createRangePickerStepNavigation({
     steps,
@@ -58,22 +59,22 @@ export const useDesktopRangePicker = _ref => {
     fieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
   const Layout = slots?.layout ?? PickersLayout;
   const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-    children: /*#__PURE__*/_jsx(PickerFieldUIContextProvider, {
-      slots: slots,
-      slotProps: slotProps,
-      inputRef: inputRef,
-      children: /*#__PURE__*/_jsxs(PickerRangePositionContext.Provider, {
-        value: rangePositionResponse,
-        children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps)), /*#__PURE__*/_jsx(PickerPopper, {
+    children: /*#__PURE__*/_jsxs(PickerRangePositionContext.Provider, {
+      value: rangePositionResponse,
+      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
+        slots: slots,
+        slotProps: slotProps
+      }, isSingleInput && {
+        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";

package/esm/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -8,7 +8,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { useLicenseVerifier } from '@mui/x-license';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
-import { usePicker, PickersModalDialog, PickerProvider, PickerFieldUIContextProvider } from '@mui/x-date-pickers/internals';
+import { usePicker, PickersModalDialog, PickerProvider } from '@mui/x-date-pickers/internals';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { useRangePosition } from "../useRangePosition.js";
 import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
@@ -21,7 +21,7 @@ export const useMobileRangePicker = _ref => {
       steps
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
-  useLicenseVerifier('x-date-pickers-pro', "MTc1NzQ2MjQwMDAwMA==");
+  useLicenseVerifier('x-date-pickers-pro', "MTc1ODc1MTIwMDAwMA==");
   const {
     slots,
     slotProps: innerSlotProps,
@@ -30,6 +30,7 @@ export const useMobileRangePicker = _ref => {
     localeText
   } = props;
   const fieldType = getRangeFieldType(slots.field);
+  const isSingleInput = fieldType === 'single-input';
   const rangePositionResponse = useRangePosition(props);
   const contextTranslations = usePickerTranslations();
   const getStepNavigation = createRangePickerStepNavigation({
@@ -55,7 +56,7 @@ export const useMobileRangePicker = _ref => {
   const _useSlotProps = useSlotProps({
       elementType: Field,
       externalSlotProps: innerSlotProps?.field,
-      additionalProps: _extends({}, fieldType === 'single-input' && isToolbarHidden && {
+      additionalProps: _extends({}, isSingleInput && isToolbarHidden && {
         id: labelId
       }),
       ownerState
@@ -93,22 +94,22 @@ export const useMobileRangePicker = _ref => {
     }
   });
   const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-    children: /*#__PURE__*/_jsx(PickerFieldUIContextProvider, {
-      slots: slots,
-      slotProps: slotProps,
-      inputRef: inputRef,
-      children: /*#__PURE__*/_jsxs(PickerRangePositionContext.Provider, {
-        value: rangePositionResponse,
-        children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
+    children: /*#__PURE__*/_jsxs(PickerRangePositionContext.Provider, {
+      value: rangePositionResponse,
+      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
+        slots: slots,
+        slotProps: slotProps
+      }, isSingleInput && {
+        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";

package/index.js

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

package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -27,7 +27,7 @@ const useDesktopRangePicker = _ref => {
       steps
     } = _ref,
     pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-  (0, _xLicense.useLicenseVerifier)('x-date-pickers-pro', "MTc1NzQ2MjQwMDAwMA==");
+  (0, _xLicense.useLicenseVerifier)('x-date-pickers-pro', "MTc1ODc1MTIwMDAwMA==");
   const {
     slots,
     slotProps,
@@ -35,7 +35,8 @@ const useDesktopRangePicker = _ref => {
     localeText
   } = props;
   const fieldType = (0, _dateFieldsUtils.getRangeFieldType)(slots.field);
-  const viewContainerRole = fieldType === 'single-input' ? 'dialog' : 'tooltip';
+  const isSingleInput = fieldType === 'single-input';
+  const viewContainerRole = isSingleInput ? 'dialog' : 'tooltip';
   const rangePositionResponse = (0, _useRangePosition.useRangePosition)(props);
   const getStepNavigation = (0, _createRangePickerStepNavigation.createRangePickerStepNavigation)({
     steps,
@@ -66,22 +67,22 @@ const useDesktopRangePicker = _ref => {
     fieldProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
   const Layout = slots?.layout ?? _PickersLayout.PickersLayout;
   const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerProvider, (0, _extends2.default)({}, providerProps, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerFieldUIContextProvider, {
-      slots: slots,
-      slotProps: slotProps,
-      inputRef: inputRef,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_usePickerRangePositionContext.PickerRangePositionContext.Provider, {
-        value: rangePositionResponse,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerPopper, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_usePickerRangePositionContext.PickerRangePositionContext.Provider, {
+      value: rangePositionResponse,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps, {
+        slots: slots,
+        slotProps: slotProps
+      }, isSingleInput && {
+        inputRef
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.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";

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -29,7 +29,7 @@ const useMobileRangePicker = _ref => {
       steps
     } = _ref,
     pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-  (0, _xLicense.useLicenseVerifier)('x-date-pickers-pro', "MTc1NzQ2MjQwMDAwMA==");
+  (0, _xLicense.useLicenseVerifier)('x-date-pickers-pro', "MTc1ODc1MTIwMDAwMA==");
   const {
     slots,
     slotProps: innerSlotProps,
@@ -38,6 +38,7 @@ const useMobileRangePicker = _ref => {
     localeText
   } = props;
   const fieldType = (0, _dateFieldsUtils.getRangeFieldType)(slots.field);
+  const isSingleInput = fieldType === 'single-input';
   const rangePositionResponse = (0, _useRangePosition.useRangePosition)(props);
   const contextTranslations = (0, _hooks.usePickerTranslations)();
   const getStepNavigation = (0, _createRangePickerStepNavigation.createRangePickerStepNavigation)({
@@ -63,7 +64,7 @@ const useMobileRangePicker = _ref => {
   const _useSlotProps = (0, _useSlotProps2.default)({
       elementType: Field,
       externalSlotProps: innerSlotProps?.field,
-      additionalProps: (0, _extends2.default)({}, fieldType === 'single-input' && isToolbarHidden && {
+      additionalProps: (0, _extends2.default)({}, isSingleInput && isToolbarHidden && {
         id: labelId
       }),
       ownerState
@@ -101,22 +102,22 @@ const useMobileRangePicker = _ref => {
     }
   });
   const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerProvider, (0, _extends2.default)({}, providerProps, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerFieldUIContextProvider, {
-      slots: slots,
-      slotProps: slotProps,
-      inputRef: inputRef,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_usePickerRangePositionContext.PickerRangePositionContext.Provider, {
-        value: rangePositionResponse,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickersModalDialog, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_usePickerRangePositionContext.PickerRangePositionContext.Provider, {
+      value: rangePositionResponse,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps, {
+        slots: slots,
+        slotProps: slotProps
+      }, isSingleInput && {
+        inputRef
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers-pro",
-  "version": "8.11.2",
+  "version": "8.12.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Date and Time Picker components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -35,9 +35,9 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "8.11.2",
-    "@mui/x-license": "8.11.2",
-    "@mui/x-date-pickers": "8.11.2"
+    "@mui/x-internals": "8.12.0",
+    "@mui/x-date-pickers": "8.12.0",
+    "@mui/x-license": "8.12.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",