@mui/x-date-pickers-pro 8.0.0-beta.1 → 8.0.0-beta.2

package/CHANGELOG.md

@@ -5,6 +5,100 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-beta.2
+
+_Mar 27, 2025_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔍 Update the Data Grid quick filter to be collapsed when not in use
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@lhilgert9.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @flaviendelangle, @hasdfa, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @mnajdova, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-beta.2`
+
+- [DataGrid] Fix error caused by trying to render rows that are not in the state anymore (#17057) @arminmeh
+- [DataGrid] Refactor: remove more material (#16922) @romgrk
+- [DataGrid] Update Quick Filter component to be expandable (#16862) @KenanYusuf
+- [DataGrid] Fix crash when used with `@mui/styled-engine-sc` (#17154) @KenanYusuf
+
+#### `@mui/x-data-grid-pro@8.0.0-beta.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.0.0-beta.2`, plus:
+
+- [DataGridPro] Data source: Allow expanding groups with unknown children (#17144) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.0.0-beta.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.0.0-beta.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-beta.2`
+
+- [fields] Extract the props of each field slot into a standalone hook for easier re-use (#17114) @flaviendelangle
+- [pickers] Fix visual regression in Date Range Calendar's day (#17148) @flaviendelangle
+- [pickers] Remove all code duplication to apply default values to validation props (#17038) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-beta.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.0.0-beta.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-beta.2`
+
+- [charts] Memoize axes and series with default (#17156) @alexfauquette
+- [charts] Add pie benchmark (#17115) @JCQuintas
+- [charts] Fix CSS vars support for dark theme (#17106) @alexfauquette
+- [charts] Fix radar hover (#17134) @alexfauquette
+- [charts] Move axis interaction to selectors (#17039) @alexfauquette
+- [charts] Fix Pie benchmark (#17125) @JCQuintas
+
+#### `@mui/x-charts-pro@8.0.0-beta.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.0.0-beta.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-beta.2`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-beta.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.0.0-beta.2`.
+
+### `@mui/x-codemod@8.0.0-beta.1`
+
+- [codemod] Add Data Grid codemods (#17121, #17124) @MBilalShafi
+
+### Docs
+
+- [docs] Fix example import for `ExportExcel` component (#17110) @KenanYusuf
+
+### Core
+
+- [code-infra] Remove `@mui/styles` dependency & patches (#17071) @mnajdova
+- [code-infra] Add more tests to slow screenshot tests (#17075) @JCQuintas
+- [code-infra] Fix pickers codecov (#17120) @JCQuintas
+- [code-infra] Move `isDeepEqual` to @mui/x-internals (#17129) @JCQuintas
+- [code-infra] Remove `test_regressions` step from React 18 pipeline (#17108) @LukasTy
+- [code-infra] Update some data-grid tests for vitest (#17078, #17104, #17146) @JCQuintas
+- [code-infra] Update some date-pickers tests for vitest (#17083) @JCQuintas
+- [infra] Update `issue-status-label-handler.yml` @michelengelen
+- [infra] Added reusable issue status label handler workflow (#17145) @michelengelen
+- [infra] Switch to reusable 'stale issues/PRs' workflow (#17107) @michelengelen
+- [telemetry] Improve request body size, update dependencies, and optimize SSR handling (#17008) @hasdfa
+
 ## 8.0.0-beta.1
 
 _Mar 21, 2025_

package/DateRangeCalendar/DateRangeCalendar.js

@@ -81,25 +81,20 @@ const InnerDayCalendarForRange = (0, _styles.styled)(_internals.DayCalendar)(({
 }));
 const DayCalendarForRange = InnerDayCalendarForRange;
 function useDateRangeCalendarDefaultizedProps(props, name) {
-  const utils = (0, _internals.useUtils)();
-  const defaultDates = (0, _internals.useDefaultDates)();
   const themeProps = (0, _styles.useThemeProps)({
     props,
     name
   });
   const reduceAnimations = (0, _internals.useReduceAnimations)(themeProps.reduceAnimations);
-  return (0, _extends2.default)({}, themeProps, {
+  const validationProps = (0, _internals.useApplyDefaultValuesToDateValidationProps)(themeProps);
+  return (0, _extends2.default)({}, themeProps, validationProps, {
     renderLoading: themeProps.renderLoading ?? (() => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       children: "..."
     })),
     reduceAnimations,
     loading: props.loading ?? false,
-    disablePast: props.disablePast ?? false,
-    disableFuture: props.disableFuture ?? false,
     openTo: themeProps.openTo ?? 'day',
     views: themeProps.views ?? ['day'],
-    minDate: (0, _internals.applyDefaultDate)(utils, themeProps.minDate, defaultDates.minDate),
-    maxDate: (0, _internals.applyDefaultDate)(utils, themeProps.maxDate, defaultDates.maxDate),
     calendars: themeProps.calendars ?? 2,
     disableDragEditing: themeProps.disableDragEditing ?? false,
     availableRangePositions: themeProps.availableRangePositions ?? ['start', 'end']

package/DateRangePicker/shared.js

@@ -12,12 +12,11 @@ var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-date-pickers/internals");
 var _DateRangePickerToolbar = require("./DateRangePickerToolbar");
 function useDateRangePickerDefaultizedProps(props, name) {
-  const utils = (0, _internals.useUtils)();
-  const defaultDates = (0, _internals.useDefaultDates)();
   const themeProps = (0, _styles.useThemeProps)({
     props,
     name
   });
+  const validationProps = (0, _internals.useApplyDefaultValuesToDateValidationProps)(themeProps);
   const localeText = React.useMemo(() => {
     if (themeProps.localeText?.toolbarTitle == null) {
       return themeProps.localeText;
@@ -26,12 +25,8 @@ function useDateRangePickerDefaultizedProps(props, name) {
       dateRangePickerToolbarTitle: themeProps.localeText.toolbarTitle
     });
   }, [themeProps.localeText]);
-  return (0, _extends2.default)({}, themeProps, {
+  return (0, _extends2.default)({}, themeProps, validationProps, {
     localeText,
-    disableFuture: themeProps.disableFuture ?? false,
-    disablePast: themeProps.disablePast ?? false,
-    minDate: (0, _internals.applyDefaultDate)(utils, themeProps.minDate, defaultDates.minDate),
-    maxDate: (0, _internals.applyDefaultDate)(utils, themeProps.maxDate, defaultDates.maxDate),
     slots: (0, _extends2.default)({
       toolbar: _DateRangePickerToolbar.DateRangePickerToolbar
     }, themeProps.slots)

package/DateRangePickerDay/DateRangePickerDay.js

@@ -96,7 +96,7 @@ const DateRangePickerDayRoot = (0, _styles.styled)('div', {
   }, {
     props: {
       isDayFillerCell: false,
-      isHighlighting: true
+      isDaySelected: true
     },
     style: {
       borderRadius: 0,

package/DateTimeRangePicker/shared.js

@@ -12,11 +12,11 @@ var _DateTimeRangePickerToolbar = require("./DateTimeRangePickerToolbar");
 var _DateTimeRangePickerTabs = require("./DateTimeRangePickerTabs");
 function useDateTimeRangePickerDefaultizedProps(props, name) {
   const utils = (0, _internals.useUtils)();
-  const defaultDates = (0, _internals.useDefaultDates)();
   const themeProps = (0, _styles.useThemeProps)({
     props,
     name
   });
+  const validationProps = (0, _internals.useApplyDefaultValuesToDateTimeValidationProps)(themeProps);
   const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
   const {
     openTo,
@@ -38,22 +38,13 @@ function useDateTimeRangePickerDefaultizedProps(props, name) {
     timeSteps: themeProps.timeSteps,
     views: defaultViews
   });
-  return (0, _extends2.default)({}, themeProps, {
+  return (0, _extends2.default)({}, themeProps, validationProps, {
     timeSteps,
     openTo,
     shouldRenderTimeInASingleColumn,
     thresholdToRenderTimeInASingleColumn,
     views,
     ampm,
-    disableFuture: themeProps.disableFuture ?? false,
-    disablePast: themeProps.disablePast ?? false,
-    minDate: (0, _internals.applyDefaultDate)(utils, themeProps.minDateTime ?? themeProps.minDate, defaultDates.minDate),
-    maxDate: (0, _internals.applyDefaultDate)(utils, themeProps.maxDateTime ?? themeProps.maxDate, defaultDates.maxDate),
-    minTime: themeProps.minDateTime ?? themeProps.minTime,
-    maxTime: themeProps.maxDateTime ?? themeProps.maxTime,
-    disableIgnoringDatePartForTimeValidation: themeProps.disableIgnoringDatePartForTimeValidation ?? Boolean(themeProps.minDateTime || themeProps.maxDateTime ||
-    // allow digital clocks to correctly check time validity: https://github.com/mui/mui-x/issues/12048
-    themeProps.disablePast || themeProps.disableFuture),
     slots: (0, _extends2.default)({
       tabs: _DateTimeRangePickerTabs.DateTimeRangePickerTabs,
       toolbar: _DateTimeRangePickerToolbar.DateTimeRangePickerToolbar

package/TimeRangePicker/shared.js

@@ -18,6 +18,7 @@ function useTimeRangePickerDefaultizedProps(props, name) {
     props,
     name
   });
+  const validationProps = (0, _internals.useApplyDefaultValuesToTimeValidationProps)(themeProps);
   const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
   const {
     openTo,
@@ -47,7 +48,7 @@ function useTimeRangePickerDefaultizedProps(props, name) {
     timeSteps: themeProps.timeSteps,
     views: defaultViews
   });
-  return (0, _extends2.default)({}, themeProps, {
+  return (0, _extends2.default)({}, themeProps, validationProps, {
     localeText,
     timeSteps,
     openTo,
@@ -55,8 +56,6 @@ function useTimeRangePickerDefaultizedProps(props, name) {
     thresholdToRenderTimeInASingleColumn,
     views,
     ampm,
-    disableFuture: themeProps.disableFuture ?? false,
-    disablePast: themeProps.disablePast ?? false,
     slots: (0, _extends2.default)({
       tabs: _TimeRangePickerTabs.TimeRangePickerTabs,
       toolbar: _TimeRangePickerToolbar.TimeRangePickerToolbar

package/esm/DateRangeCalendar/DateRangeCalendar.js

@@ -15,7 +15,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
 import { Watermark } from '@mui/x-license';
-import { applyDefaultDate, DayCalendar, useReduceAnimations, useCalendarState, useDefaultDates, useUtils, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValue, useViews, usePickerPrivateContext, areDatesEqual } from '@mui/x-date-pickers/internals';
+import { DayCalendar, useReduceAnimations, useCalendarState, useUtils, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValue, useViews, usePickerPrivateContext, areDatesEqual, useApplyDefaultValuesToDateValidationProps } from '@mui/x-date-pickers/internals';
 import { warnOnce } from '@mui/x-internals/warning';
 import { getReleaseInfo } from "../internals/utils/releaseInfo.js";
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from "./dateRangeCalendarClasses.js";
@@ -74,25 +74,20 @@ const InnerDayCalendarForRange = styled(DayCalendar)(({
 }));
 const DayCalendarForRange = InnerDayCalendarForRange;
 function useDateRangeCalendarDefaultizedProps(props, name) {
-  const utils = useUtils();
-  const defaultDates = useDefaultDates();
   const themeProps = useThemeProps({
     props,
     name
   });
   const reduceAnimations = useReduceAnimations(themeProps.reduceAnimations);
-  return _extends({}, themeProps, {
+  const validationProps = useApplyDefaultValuesToDateValidationProps(themeProps);
+  return _extends({}, themeProps, validationProps, {
     renderLoading: themeProps.renderLoading ?? (() => /*#__PURE__*/_jsx("span", {
       children: "..."
     })),
     reduceAnimations,
     loading: props.loading ?? false,
-    disablePast: props.disablePast ?? false,
-    disableFuture: props.disableFuture ?? false,
     openTo: themeProps.openTo ?? 'day',
     views: themeProps.views ?? ['day'],
-    minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
-    maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate),
     calendars: themeProps.calendars ?? 2,
     disableDragEditing: themeProps.disableDragEditing ?? false,
     availableRangePositions: themeProps.availableRangePositions ?? ['start', 'end']

package/esm/DateRangePicker/shared.js

@@ -1,15 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { useDefaultDates, useUtils, applyDefaultDate } from '@mui/x-date-pickers/internals';
+import { useApplyDefaultValuesToDateValidationProps } from '@mui/x-date-pickers/internals';
 import { DateRangePickerToolbar } from "./DateRangePickerToolbar.js";
 export function useDateRangePickerDefaultizedProps(props, name) {
-  const utils = useUtils();
-  const defaultDates = useDefaultDates();
   const themeProps = useThemeProps({
     props,
     name
   });
+  const validationProps = useApplyDefaultValuesToDateValidationProps(themeProps);
   const localeText = React.useMemo(() => {
     if (themeProps.localeText?.toolbarTitle == null) {
       return themeProps.localeText;
@@ -18,12 +17,8 @@ export function useDateRangePickerDefaultizedProps(props, name) {
       dateRangePickerToolbarTitle: themeProps.localeText.toolbarTitle
     });
   }, [themeProps.localeText]);
-  return _extends({}, themeProps, {
+  return _extends({}, themeProps, validationProps, {
     localeText,
-    disableFuture: themeProps.disableFuture ?? false,
-    disablePast: themeProps.disablePast ?? false,
-    minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
-    maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate),
     slots: _extends({
       toolbar: DateRangePickerToolbar
     }, themeProps.slots)

package/esm/DateRangePickerDay/DateRangePickerDay.js

@@ -89,7 +89,7 @@ const DateRangePickerDayRoot = styled('div', {
   }, {
     props: {
       isDayFillerCell: false,
-      isHighlighting: true
+      isDaySelected: true
     },
     style: {
       borderRadius: 0,

package/esm/DateTimeRangePicker/shared.js

@@ -1,15 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { useThemeProps } from '@mui/material/styles';
-import { useDefaultDates, useUtils, applyDefaultDate, applyDefaultViewProps, resolveTimeViewsResponse } from '@mui/x-date-pickers/internals';
+import { useUtils, applyDefaultViewProps, resolveTimeViewsResponse, useApplyDefaultValuesToDateTimeValidationProps } from '@mui/x-date-pickers/internals';
 import { DateTimeRangePickerToolbar } from "./DateTimeRangePickerToolbar.js";
 import { DateTimeRangePickerTabs } from "./DateTimeRangePickerTabs.js";
 export function useDateTimeRangePickerDefaultizedProps(props, name) {
   const utils = useUtils();
-  const defaultDates = useDefaultDates();
   const themeProps = useThemeProps({
     props,
     name
   });
+  const validationProps = useApplyDefaultValuesToDateTimeValidationProps(themeProps);
   const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
   const {
     openTo,
@@ -31,22 +31,13 @@ export function useDateTimeRangePickerDefaultizedProps(props, name) {
     timeSteps: themeProps.timeSteps,
     views: defaultViews
   });
-  return _extends({}, themeProps, {
+  return _extends({}, themeProps, validationProps, {
     timeSteps,
     openTo,
     shouldRenderTimeInASingleColumn,
     thresholdToRenderTimeInASingleColumn,
     views,
     ampm,
-    disableFuture: themeProps.disableFuture ?? false,
-    disablePast: themeProps.disablePast ?? false,
-    minDate: applyDefaultDate(utils, themeProps.minDateTime ?? themeProps.minDate, defaultDates.minDate),
-    maxDate: applyDefaultDate(utils, themeProps.maxDateTime ?? themeProps.maxDate, defaultDates.maxDate),
-    minTime: themeProps.minDateTime ?? themeProps.minTime,
-    maxTime: themeProps.maxDateTime ?? themeProps.maxTime,
-    disableIgnoringDatePartForTimeValidation: themeProps.disableIgnoringDatePartForTimeValidation ?? Boolean(themeProps.minDateTime || themeProps.maxDateTime ||
-    // allow digital clocks to correctly check time validity: https://github.com/mui/mui-x/issues/12048
-    themeProps.disablePast || themeProps.disableFuture),
     slots: _extends({
       tabs: DateTimeRangePickerTabs,
       toolbar: DateTimeRangePickerToolbar

package/esm/TimeRangePicker/shared.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { useUtils, applyDefaultViewProps, resolveTimeViewsResponse } from '@mui/x-date-pickers/internals';
+import { useUtils, applyDefaultViewProps, resolveTimeViewsResponse, useApplyDefaultValuesToTimeValidationProps } from '@mui/x-date-pickers/internals';
 import { TimeRangePickerToolbar } from "./TimeRangePickerToolbar.js";
 import { TimeRangePickerTabs } from "./TimeRangePickerTabs.js";
 export function useTimeRangePickerDefaultizedProps(props, name) {
@@ -10,6 +10,7 @@ export function useTimeRangePickerDefaultizedProps(props, name) {
     props,
     name
   });
+  const validationProps = useApplyDefaultValuesToTimeValidationProps(themeProps);
   const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
   const {
     openTo,
@@ -39,7 +40,7 @@ export function useTimeRangePickerDefaultizedProps(props, name) {
     timeSteps: themeProps.timeSteps,
     views: defaultViews
   });
-  return _extends({}, themeProps, {
+  return _extends({}, themeProps, validationProps, {
     localeText,
     timeSteps,
     openTo,
@@ -47,8 +48,6 @@ export function useTimeRangePickerDefaultizedProps(props, name) {
     thresholdToRenderTimeInASingleColumn,
     views,
     ampm,
-    disableFuture: themeProps.disableFuture ?? false,
-    disablePast: themeProps.disablePast ?? false,
     slots: _extends({
       tabs: TimeRangePickerTabs,
       toolbar: TimeRangePickerToolbar

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v8.0.0-beta.1
+ * @mui/x-date-pickers-pro v8.0.0-beta.2
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/esm/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTc0MjUxNTIwMDAwMA==";
+  const releaseInfo = "MTc0MzExMjgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/esm/managers/useDateRangeManager.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
-import { getDateFieldInternalPropsDefaults, useUtils } from '@mui/x-date-pickers/internals';
+import { useApplyDefaultValuesToDateValidationProps, useUtils } from '@mui/x-date-pickers/internals';
 import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
 import { validateDateRange } from "../validation/index.js";
 import { formatRange } from "../internals/utils/date-utils.js";
@@ -20,15 +20,7 @@ export function useDateRangeManager(parameters = {}) {
       dateSeparator
     }),
     internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
-    internal_applyDefaultsToFieldInternalProps: ({
-      internalProps,
-      utils,
-      defaultDates
-    }) => _extends({}, internalProps, getDateFieldInternalPropsDefaults({
-      defaultDates,
-      utils,
-      internalProps
-    })),
+    internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToDateRangeFieldInternalProps,
     internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }
@@ -38,4 +30,11 @@ function useOpenPickerButtonAriaLabel(value) {
   return React.useMemo(() => {
     return translations.openRangePickerDialogue(formatRange(utils, value, 'fullDate'));
   }, [value, translations, utils]);
+}
+function useApplyDefaultValuesToDateRangeFieldInternalProps(internalProps) {
+  const utils = useUtils();
+  const validationProps = useApplyDefaultValuesToDateValidationProps(internalProps);
+  return React.useMemo(() => _extends({}, internalProps, validationProps, {
+    format: internalProps.format ?? utils.formats.keyboardDate
+  }), [internalProps, validationProps, utils]);
 }

package/esm/managers/useDateTimeRangeManager.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
-import { getDateTimeFieldInternalPropsDefaults, useUtils } from '@mui/x-date-pickers/internals';
+import { useApplyDefaultValuesToDateTimeValidationProps, useUtils } from '@mui/x-date-pickers/internals';
 import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
 import { validateDateTimeRange } from "../validation/index.js";
 import { formatRange } from "../internals/utils/date-utils.js";
@@ -20,15 +20,7 @@ export function useDateTimeRangeManager(parameters = {}) {
       dateSeparator
     }),
     internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
-    internal_applyDefaultsToFieldInternalProps: ({
-      internalProps,
-      utils,
-      defaultDates
-    }) => _extends({}, internalProps, getDateTimeFieldInternalPropsDefaults({
-      internalProps,
-      utils,
-      defaultDates
-    })),
+    internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToDateTimeRangeFieldInternalProps,
     internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }
@@ -38,4 +30,12 @@ function useOpenPickerButtonAriaLabel(value) {
   return React.useMemo(() => {
     return translations.openRangePickerDialogue(formatRange(utils, value, 'fullDate'));
   }, [value, translations, utils]);
+}
+function useApplyDefaultValuesToDateTimeRangeFieldInternalProps(internalProps) {
+  const utils = useUtils();
+  const validationProps = useApplyDefaultValuesToDateTimeValidationProps(internalProps);
+  const ampm = React.useMemo(() => internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(), [internalProps.ampm, utils]);
+  return React.useMemo(() => _extends({}, internalProps, validationProps, {
+    format: internalProps.format ?? (ampm ? utils.formats.keyboardDateTime12h : utils.formats.keyboardDateTime24h)
+  }), [internalProps, validationProps, ampm, utils]);
 }

package/esm/managers/useTimeRangeManager.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
-import { getTimeFieldInternalPropsDefaults, useUtils } from '@mui/x-date-pickers/internals';
+import { useApplyDefaultValuesToTimeValidationProps, useUtils } from '@mui/x-date-pickers/internals';
 import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
 import { validateTimeRange } from "../validation/index.js";
 import { formatRange } from "../internals/utils/date-utils.js";
@@ -21,13 +21,7 @@ export function useTimeRangeManager(parameters = {}) {
       dateSeparator
     }),
     internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
-    internal_applyDefaultsToFieldInternalProps: ({
-      internalProps,
-      utils
-    }) => _extends({}, internalProps, getTimeFieldInternalPropsDefaults({
-      utils,
-      internalProps
-    })),
+    internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToTimeRangeFieldInternalProps,
     internal_useOpenPickerButtonAriaLabel: createUseOpenPickerButtonAriaLabel(ampm)
   }), [enableAccessibleFieldDOMStructure, dateSeparator, ampm]);
 }
@@ -40,4 +34,12 @@ function createUseOpenPickerButtonAriaLabel(ampm) {
       return translations.openRangePickerDialogue(formatRange(utils, value, formatKey));
     }, [value, translations, utils]);
   };
+}
+function useApplyDefaultValuesToTimeRangeFieldInternalProps(internalProps) {
+  const utils = useUtils();
+  const validationProps = useApplyDefaultValuesToTimeValidationProps(internalProps);
+  const ampm = React.useMemo(() => internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(), [internalProps.ampm, utils]);
+  return React.useMemo(() => _extends({}, internalProps, validationProps, {
+    format: internalProps.format ?? (ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h)
+  }), [internalProps, validationProps, ampm, utils]);
 }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v8.0.0-beta.1
+ * @mui/x-date-pickers-pro v8.0.0-beta.2
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/internals/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTc0MjUxNTIwMDAwMA==";
+  const releaseInfo = "MTc0MzExMjgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/managers/useDateRangeManager.js

@@ -27,15 +27,7 @@ function useDateRangeManager(parameters = {}) {
       dateSeparator
     }),
     internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
-    internal_applyDefaultsToFieldInternalProps: ({
-      internalProps,
-      utils,
-      defaultDates
-    }) => (0, _extends2.default)({}, internalProps, (0, _internals.getDateFieldInternalPropsDefaults)({
-      defaultDates,
-      utils,
-      internalProps
-    })),
+    internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToDateRangeFieldInternalProps,
     internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }
@@ -45,4 +37,11 @@ function useOpenPickerButtonAriaLabel(value) {
   return React.useMemo(() => {
     return translations.openRangePickerDialogue((0, _dateUtils.formatRange)(utils, value, 'fullDate'));
   }, [value, translations, utils]);
+}
+function useApplyDefaultValuesToDateRangeFieldInternalProps(internalProps) {
+  const utils = (0, _internals.useUtils)();
+  const validationProps = (0, _internals.useApplyDefaultValuesToDateValidationProps)(internalProps);
+  return React.useMemo(() => (0, _extends2.default)({}, internalProps, validationProps, {
+    format: internalProps.format ?? utils.formats.keyboardDate
+  }), [internalProps, validationProps, utils]);
 }

package/managers/useDateTimeRangeManager.js

@@ -27,15 +27,7 @@ function useDateTimeRangeManager(parameters = {}) {
       dateSeparator
     }),
     internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
-    internal_applyDefaultsToFieldInternalProps: ({
-      internalProps,
-      utils,
-      defaultDates
-    }) => (0, _extends2.default)({}, internalProps, (0, _internals.getDateTimeFieldInternalPropsDefaults)({
-      internalProps,
-      utils,
-      defaultDates
-    })),
+    internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToDateTimeRangeFieldInternalProps,
     internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }
@@ -45,4 +37,12 @@ function useOpenPickerButtonAriaLabel(value) {
   return React.useMemo(() => {
     return translations.openRangePickerDialogue((0, _dateUtils.formatRange)(utils, value, 'fullDate'));
   }, [value, translations, utils]);
+}
+function useApplyDefaultValuesToDateTimeRangeFieldInternalProps(internalProps) {
+  const utils = (0, _internals.useUtils)();
+  const validationProps = (0, _internals.useApplyDefaultValuesToDateTimeValidationProps)(internalProps);
+  const ampm = React.useMemo(() => internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(), [internalProps.ampm, utils]);
+  return React.useMemo(() => (0, _extends2.default)({}, internalProps, validationProps, {
+    format: internalProps.format ?? (ampm ? utils.formats.keyboardDateTime12h : utils.formats.keyboardDateTime24h)
+  }), [internalProps, validationProps, ampm, utils]);
 }

package/managers/useTimeRangeManager.js

@@ -28,13 +28,7 @@ function useTimeRangeManager(parameters = {}) {
       dateSeparator
     }),
     internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
-    internal_applyDefaultsToFieldInternalProps: ({
-      internalProps,
-      utils
-    }) => (0, _extends2.default)({}, internalProps, (0, _internals.getTimeFieldInternalPropsDefaults)({
-      utils,
-      internalProps
-    })),
+    internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToTimeRangeFieldInternalProps,
     internal_useOpenPickerButtonAriaLabel: createUseOpenPickerButtonAriaLabel(ampm)
   }), [enableAccessibleFieldDOMStructure, dateSeparator, ampm]);
 }
@@ -47,4 +41,12 @@ function createUseOpenPickerButtonAriaLabel(ampm) {
       return translations.openRangePickerDialogue((0, _dateUtils.formatRange)(utils, value, formatKey));
     }, [value, translations, utils]);
   };
+}
+function useApplyDefaultValuesToTimeRangeFieldInternalProps(internalProps) {
+  const utils = (0, _internals.useUtils)();
+  const validationProps = (0, _internals.useApplyDefaultValuesToTimeValidationProps)(internalProps);
+  const ampm = React.useMemo(() => internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(), [internalProps.ampm, utils]);
+  return React.useMemo(() => (0, _extends2.default)({}, internalProps, validationProps, {
+    format: internalProps.format ?? (ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h)
+  }), [internalProps, validationProps, ampm, utils]);
 }