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

package/CHANGELOG.md

@@ -5,6 +5,177 @@
 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_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@jyash97.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @flaviendelangle, @JCQuintas, @KenanYusuf.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-beta.1`
+
+- [DataGrid] Fix error caused by `forwardRef` to `ClickAwayListener` (#17049) @arminmeh
+- [DataGrid] Fix error while editing rows with custom id (#17048) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.0.0-beta.1`, plus:
+
+- [DataGridPro] Fix header select checkbox state with `checkboxSelectionVisibleOnly` and `paginationMode="server"` (#17026) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.0.0-beta.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.0.0-beta.1`, plus:
+
+- [DataGridPremium] Update column state correctly when grouping mode is updated with one grouping column (#17069) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-beta.1`
+
+- [fields] Clean the `useField` hook (part 1) (#16944) @flaviendelangle
+- [fields] Improve the check for year in `doesSectionFormatHaveLeadingZeros` (#17051) @flaviendelangle
+- [pickers] Deprecate the `disableOpenPicker` prop (#17040) @flaviendelangle
+- [pickers] Simplify the `cleanLeadingZeros` method (#17063) @flaviendelangle
+- [pickers] Use the new `ownerState` in `PickersDay` and `DateRangePickerDay` (#17035) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.0.0-beta.1`, plus:
+
+- [DateRangePicker] Use desktop media query constant on range pickers (#17052) @flaviendelangle
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-beta.1`
+
+- [charts] Fix horizontal bar with multiple axes (#17059) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-beta.1`, plus:
+
+- [charts-pro] Allow disabling Heatmap tooltip (#17060) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-beta.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-beta.1`.
+
+### Docs
+
+- [docs] Fix 404 (#17033) @alexfauquette
+- [docs] Fix Data Grid advanced list view demo (#17064) @KenanYusuf
+
 ## 8.0.0-beta.0
 
 <img width="100%" alt="MUI X v8 Beta is live" src="https://github.com/user-attachments/assets/61ec4dd8-c946-456b-8b45-d51de8772f5d">

package/DateCalendar/DateCalendar.js

@@ -31,6 +31,7 @@ var _useControlledValue = require("../internals/hooks/useControlledValue");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _dimensions = require("../internals/constants/dimensions");
 var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
+var _useDateManager = require("../managers/useDateManager");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "referenceDate", "disableFuture", "disablePast", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "classes", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsOrder", "yearsPerRow", "monthsPerRow", "timezone"];
 const useUtilityClasses = classes => {
@@ -41,25 +42,20 @@ const useUtilityClasses = classes => {
   return (0, _utils.unstable_composeClasses)(slots, _dateCalendarClasses.getDateCalendarUtilityClass, classes);
 };
 function useDateCalendarDefaultizedProps(props, name) {
-  const utils = (0, _useUtils.useUtils)();
-  const defaultDates = (0, _useUtils.useDefaultDates)();
   const themeProps = (0, _styles.useThemeProps)({
     props,
     name
   });
   const reduceAnimations = (0, _useReduceAnimations.useReduceAnimations)(themeProps.reduceAnimations);
-  return (0, _extends2.default)({}, themeProps, {
+  const validationProps = (0, _useDateManager.useApplyDefaultValuesToDateValidationProps)(themeProps);
+  return (0, _extends2.default)({}, themeProps, validationProps, {
     loading: themeProps.loading ?? false,
-    disablePast: themeProps.disablePast ?? false,
-    disableFuture: themeProps.disableFuture ?? false,
     openTo: themeProps.openTo ?? 'day',
     views: themeProps.views ?? ['year', 'day'],
     reduceAnimations,
     renderLoading: themeProps.renderLoading ?? (() => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       children: "..."
-    })),
-    minDate: (0, _dateUtils.applyDefaultDate)(utils, themeProps.minDate, defaultDates.minDate),
-    maxDate: (0, _dateUtils.applyDefaultDate)(utils, themeProps.maxDate, defaultDates.maxDate)
+    }))
   });
 }
 const DateCalendarRoot = (0, _styles.styled)(_PickerViewRoot.PickerViewRoot, {

package/DateCalendar/DayCalendar.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { DefaultizedProps, SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { PickersDayProps, ExportedPickersDayProps } from "../PickersDay/PickersDay.js";
+import { PickerDayOwnerState, PickersDayProps } from "../PickersDay/index.js";
+import { ExportedPickersDayProps } from "../PickersDay/PickersDay.types.js";
 import { PickerOnChangeFn } from "../internals/hooks/useViews.js";
 import { SlideDirection, SlideTransitionProps } from "./PickersSlideTransition.js";
 import { BaseDateValidationProps, DayValidationProps, MonthValidationProps, YearValidationProps } from "../internals/models/validation.js";
 import { DayCalendarClasses } from "./dayCalendarClasses.js";
-import { PickerOwnerState, PickerValidDate, TimezoneProps } from "../models/index.js";
+import { PickerValidDate, TimezoneProps } from "../models/index.js";
 import { FormProps } from "../internals/models/formProps.js";
 export interface DayCalendarSlots {
   /**
@@ -18,11 +19,6 @@ export interface DayCalendarSlots {
 export interface DayCalendarSlotProps {
   day?: SlotComponentPropsFromProps<PickersDayProps, {}, PickerDayOwnerState>;
 }
-export interface PickerDayOwnerState extends PickerOwnerState {
-  isDaySelected: boolean;
-  isDayDisabled: boolean;
-  day: PickerValidDate;
-}
 export interface ExportedDayCalendarProps extends ExportedPickersDayProps {
   /**
    * If `true`, calls `renderLoading` instead of rendering the day calendar.

package/DateCalendar/DayCalendar.js

@@ -17,7 +17,7 @@ var _RtlProvider = require("@mui/system/RtlProvider");
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _PickersDay = require("../PickersDay/PickersDay");
+var _PickersDay = require("../PickersDay");
 var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _dimensions = require("../internals/constants/dimensions");
@@ -25,7 +25,7 @@ var _PickersSlideTransition = require("./PickersSlideTransition");
 var _useIsDateDisabled = require("./useIsDateDisabled");
 var _dateUtils = require("../internals/utils/date-utils");
 var _dayCalendarClasses = require("./dayCalendarClasses");
-var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
+var _usePickerDayOwnerState = require("../PickersDay/usePickerDayOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["parentProps", "day", "focusedDay", "selectedDays", "isDateDisabled", "currentMonthNumber", "isViewFocused"],
   _excluded2 = ["ownerState"];
@@ -88,7 +88,7 @@ const PickersCalendarWeekNumberLabel = (0, _styles.styled)(_Typography.default,
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  color: theme.palette.text.disabled
+  color: (theme.vars || theme).palette.text.disabled
 }));
 const PickersCalendarWeekNumber = (0, _styles.styled)(_Typography.default, {
   name: 'MuiDayCalendar',
@@ -101,7 +101,7 @@ const PickersCalendarWeekNumber = (0, _styles.styled)(_Typography.default, {
   height: _dimensions.DAY_SIZE,
   padding: 0,
   margin: `0 ${_dimensions.DAY_MARGIN}px`,
-  color: theme.palette.text.disabled,
+  color: (theme.vars || theme).palette.text.disabled,
   fontSize: '0.75rem',
   alignItems: 'center',
   justifyContent: 'center',
@@ -162,14 +162,23 @@ function WrappedDay(_ref) {
   } = parentProps;
   const utils = (0, _useUtils.useUtils)();
   const now = (0, _useUtils.useNow)(timezone);
-  const {
-    ownerState
-  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const isFocusableDay = focusedDay != null && utils.isSameDay(day, focusedDay);
   const isFocusedDay = isViewFocused && isFocusableDay;
   const isSelected = selectedDays.some(selectedDay => utils.isSameDay(selectedDay, day));
   const isToday = utils.isSameDay(day, now);
   const isDisabled = React.useMemo(() => disabled || isDateDisabled(day), [disabled, isDateDisabled, day]);
+  const isOutsideCurrentMonth = React.useMemo(() => utils.getMonth(day) !== currentMonthNumber, [utils, day, currentMonthNumber]);
+  const ownerState = (0, _usePickerDayOwnerState.usePickerDayOwnerState)({
+    day,
+    selected: isSelected,
+    disabled: isDisabled,
+    today: isToday,
+    outsideCurrentMonth: isOutsideCurrentMonth,
+    disableMargin: undefined,
+    // This prop can only be defined using slotProps.day so the ownerState for useSlotProps cannot have its value.
+    disableHighlightToday,
+    showDaysOutsideCurrentMonth
+  });
   const Day = slots?.day ?? _PickersDay.PickersDay;
   // We don't want to pass to ownerState down, to avoid re-rendering all the day whenever a prop changes.
   const _useSlotProps = (0, _useSlotProps2.default)({
@@ -190,7 +199,6 @@ function WrappedDay(_ref) {
       })
     }),
     dayProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
-  const outsideCurrentMonth = React.useMemo(() => utils.getMonth(day) !== currentMonthNumber, [utils, day, currentMonthNumber]);
   const isFirstVisibleCell = React.useMemo(() => {
     const startOfMonth = utils.startOfMonth(utils.setMonth(day, currentMonthNumber));
     if (!showDaysOutsideCurrentMonth) {
@@ -208,9 +216,9 @@ function WrappedDay(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Day, (0, _extends2.default)({}, dayProps, {
     day: day,
     disabled: isDisabled,
-    autoFocus: !outsideCurrentMonth && isFocusedDay,
+    autoFocus: !isOutsideCurrentMonth && isFocusedDay,
     today: isToday,
-    outsideCurrentMonth: outsideCurrentMonth,
+    outsideCurrentMonth: isOutsideCurrentMonth,
     isFirstVisibleCell: isFirstVisibleCell,
     isLastVisibleCell: isLastVisibleCell,
     selected: isSelected,

package/DateCalendar/index.d.ts

@@ -1,6 +1,5 @@
 export { DateCalendar } from "./DateCalendar.js";
 export type { DateCalendarProps, DateCalendarSlots, DateCalendarSlotProps } from './DateCalendar.types';
-export type { PickerDayOwnerState } from './DayCalendar';
 export { getDateCalendarUtilityClass, dateCalendarClasses } from "./dateCalendarClasses.js";
 export type { DateCalendarClassKey, DateCalendarClasses } from './dateCalendarClasses';
 export { dayCalendarClasses } from "./dayCalendarClasses.js";

package/DateField/useDateField.d.ts

@@ -1,2 +1,2 @@
 import { UseDateFieldProps } from "./DateField.types.js";
-export declare const useDateField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "focused" | keyof import("../internals").BaseDateValidationProps | "shouldDisableYear" | "shouldDisableMonth" | "shouldDisableDate" | "referenceDate" | "formatDensity" | "timezone" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "unstableStartFieldRef" | "unstableEndFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;
+export declare const useDateField: <TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseDateFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TProps) => import("../internals").UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TProps>;

package/DateField/useDateField.js

@@ -6,26 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDateField = void 0;
 var _useField = require("../internals/hooks/useField");
-var _hooks = require("../hooks");
 var _managers = require("../managers");
 const useDateField = props => {
   const manager = (0, _managers.useDateManager)(props);
-  const {
-    forwardedProps,
-    internalProps
-  } = (0, _hooks.useSplitFieldProps)(props, 'date');
-  const internalPropsWithDefaults = (0, _useField.useFieldInternalPropsWithDefaults)({
-    manager,
-    internalProps
-  });
   return (0, _useField.useField)({
-    forwardedProps,
-    internalProps: internalPropsWithDefaults,
-    valueManager: manager.internal_valueManager,
-    fieldValueManager: manager.internal_fieldValueManager,
-    validator: manager.validator,
-    valueType: manager.valueType,
-    getOpenPickerButtonAriaLabel: manager.internal_useOpenPickerButtonAriaLabel()
+    manager,
+    props
   });
 };
 exports.useDateField = useDateField;

package/DatePicker/DatePicker.js

@@ -106,6 +106,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   disableHighlightToday: _propTypes.default.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: _propTypes.default.bool,

package/DatePicker/shared.js

@@ -9,17 +9,15 @@ exports.useDatePickerDefaultizedProps = useDatePickerDefaultizedProps;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
-var _useUtils = require("../internals/hooks/useUtils");
 var _views = require("../internals/utils/views");
-var _dateUtils = require("../internals/utils/date-utils");
 var _DatePickerToolbar = require("./DatePickerToolbar");
+var _useDateManager = require("../managers/useDateManager");
 function useDatePickerDefaultizedProps(props, name) {
-  const utils = (0, _useUtils.useUtils)();
-  const defaultDates = (0, _useUtils.useDefaultDates)();
   const themeProps = (0, _styles.useThemeProps)({
     props,
     name
   });
+  const validationProps = (0, _useDateManager.useApplyDefaultValuesToDateValidationProps)(themeProps);
   const localeText = React.useMemo(() => {
     if (themeProps.localeText?.toolbarTitle == null) {
       return themeProps.localeText;
@@ -28,7 +26,7 @@ function useDatePickerDefaultizedProps(props, name) {
       datePickerToolbarTitle: themeProps.localeText.toolbarTitle
     });
   }, [themeProps.localeText]);
-  return (0, _extends2.default)({}, themeProps, {
+  return (0, _extends2.default)({}, themeProps, validationProps, {
     localeText
   }, (0, _views.applyDefaultViewProps)({
     views: themeProps.views,
@@ -36,10 +34,6 @@ function useDatePickerDefaultizedProps(props, name) {
     defaultViews: ['year', 'day'],
     defaultOpenTo: 'day'
   }), {
-    disableFuture: themeProps.disableFuture ?? false,
-    disablePast: themeProps.disablePast ?? false,
-    minDate: (0, _dateUtils.applyDefaultDate)(utils, themeProps.minDate, defaultDates.minDate),
-    maxDate: (0, _dateUtils.applyDefaultDate)(utils, themeProps.maxDate, defaultDates.maxDate),
     slots: (0, _extends2.default)({
       toolbar: _DatePickerToolbar.DatePickerToolbar
     }, themeProps.slots)

package/DateTimeField/useDateTimeField.d.ts

@@ -1,2 +1,2 @@
 import { UseDateTimeFieldProps } from "./DateTimeField.types.js";
-export declare const useDateTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "focused" | "maxDate" | "minDate" | "disablePast" | "disableFuture" | "shouldDisableYear" | "shouldDisableMonth" | "shouldDisableDate" | "minTime" | "maxTime" | "minutesStep" | "shouldDisableTime" | "disableIgnoringDatePartForTimeValidation" | "ampm" | "minDateTime" | "maxDateTime" | "referenceDate" | "formatDensity" | "timezone" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "unstableStartFieldRef" | "unstableEndFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;
+export declare const useDateTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TProps) => import("../internals").UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TProps>;

package/DateTimeField/useDateTimeField.js

@@ -6,26 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDateTimeField = void 0;
 var _useField = require("../internals/hooks/useField");
-var _hooks = require("../hooks");
 var _managers = require("../managers");
 const useDateTimeField = props => {
   const manager = (0, _managers.useDateTimeManager)(props);
-  const {
-    forwardedProps,
-    internalProps
-  } = (0, _hooks.useSplitFieldProps)(props, 'date-time');
-  const internalPropsWithDefaults = (0, _useField.useFieldInternalPropsWithDefaults)({
-    manager,
-    internalProps
-  });
   return (0, _useField.useField)({
-    forwardedProps,
-    internalProps: internalPropsWithDefaults,
-    valueManager: manager.internal_valueManager,
-    fieldValueManager: manager.internal_fieldValueManager,
-    validator: manager.validator,
-    valueType: manager.valueType,
-    getOpenPickerButtonAriaLabel: manager.internal_useOpenPickerButtonAriaLabel()
+    manager,
+    props
   });
 };
 exports.useDateTimeField = useDateTimeField;

package/DateTimePicker/DateTimePicker.js

@@ -121,6 +121,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: _propTypes.default.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: _propTypes.default.bool,

package/DateTimePicker/shared.js

@@ -10,18 +10,18 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _useUtils = require("../internals/hooks/useUtils");
-var _dateUtils = require("../internals/utils/date-utils");
 var _DateTimePickerTabs = require("./DateTimePickerTabs");
 var _DateTimePickerToolbar = require("./DateTimePickerToolbar");
 var _views = require("../internals/utils/views");
 var _dateTimeUtils = require("../internals/utils/date-time-utils");
+var _useDateTimeManager = require("../managers/useDateTimeManager");
 function useDateTimePickerDefaultizedProps(props, name) {
   const utils = (0, _useUtils.useUtils)();
-  const defaultDates = (0, _useUtils.useDefaultDates)();
   const themeProps = (0, _styles.useThemeProps)({
     props,
     name
   });
+  const validationProps = (0, _useDateTimeManager.useApplyDefaultValuesToDateTimeValidationProps)(themeProps);
   const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
   const localeText = React.useMemo(() => {
     if (themeProps.localeText?.toolbarTitle == null) {
@@ -51,7 +51,7 @@ function useDateTimePickerDefaultizedProps(props, name) {
     timeSteps: themeProps.timeSteps,
     views: defaultViews
   });
-  return (0, _extends2.default)({}, themeProps, {
+  return (0, _extends2.default)({}, themeProps, validationProps, {
     timeSteps,
     openTo,
     shouldRenderTimeInASingleColumn,
@@ -60,16 +60,6 @@ function useDateTimePickerDefaultizedProps(props, name) {
     ampm,
     localeText,
     orientation: themeProps.orientation ?? 'portrait',
-    // TODO: Remove from public API
-    disableIgnoringDatePartForTimeValidation: themeProps.disableIgnoringDatePartForTimeValidation ?? Boolean(themeProps.minDateTime || themeProps.maxDateTime ||
-    // allow time clock to correctly check time validity: https://github.com/mui/mui-x/issues/8520
-    themeProps.disablePast || themeProps.disableFuture),
-    disableFuture: themeProps.disableFuture ?? false,
-    disablePast: themeProps.disablePast ?? false,
-    minDate: (0, _dateUtils.applyDefaultDate)(utils, themeProps.minDateTime ?? themeProps.minDate, defaultDates.minDate),
-    maxDate: (0, _dateUtils.applyDefaultDate)(utils, themeProps.maxDateTime ?? themeProps.maxDate, defaultDates.maxDate),
-    minTime: themeProps.minDateTime ?? themeProps.minTime,
-    maxTime: themeProps.maxDateTime ?? themeProps.maxTime,
     slots: (0, _extends2.default)({
       toolbar: _DateTimePickerToolbar.DateTimePickerToolbar,
       tabs: _DateTimePickerTabs.DateTimePickerTabs

package/DesktopDatePicker/DesktopDatePicker.js

@@ -121,6 +121,7 @@ DesktopDatePicker.propTypes = {
   disableHighlightToday: _propTypes.default.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: _propTypes.default.bool,

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -210,6 +210,7 @@ DesktopDateTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: _propTypes.default.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: _propTypes.default.bool,

package/DesktopTimePicker/DesktopTimePicker.js

@@ -135,6 +135,7 @@ DesktopTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: _propTypes.default.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: _propTypes.default.bool,

package/MobileDatePicker/MobileDatePicker.js

@@ -114,6 +114,7 @@ MobileDatePicker.propTypes = {
   disableHighlightToday: _propTypes.default.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: _propTypes.default.bool,

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -172,6 +172,7 @@ MobileDateTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: _propTypes.default.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: _propTypes.default.bool,

package/MobileTimePicker/MobileTimePicker.js

@@ -120,6 +120,7 @@ MobileTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: _propTypes.default.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: _propTypes.default.bool,

package/MonthCalendar/MonthCalendar.js

@@ -26,6 +26,7 @@ var _getDefaultReferenceDate = require("../internals/utils/getDefaultReferenceDa
 var _useControlledValue = require("../internals/hooks/useControlledValue");
 var _dimensions = require("../internals/constants/dimensions");
 var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
+var _useDateManager = require("../managers/useDateManager");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["autoFocus", "className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
 const useUtilityClasses = classes => {
@@ -35,19 +36,13 @@ const useUtilityClasses = classes => {
   return (0, _utils.unstable_composeClasses)(slots, _monthCalendarClasses.getMonthCalendarUtilityClass, classes);
 };
 function useMonthCalendarDefaultizedProps(props, name) {
-  const utils = (0, _useUtils.useUtils)();
-  const defaultDates = (0, _useUtils.useDefaultDates)();
   const themeProps = (0, _styles.useThemeProps)({
     props,
     name
   });
-  return (0, _extends2.default)({
-    disableFuture: false,
-    disablePast: false
-  }, themeProps, {
-    monthsPerRow: themeProps.monthsPerRow ?? 3,
-    minDate: (0, _dateUtils.applyDefaultDate)(utils, themeProps.minDate, defaultDates.minDate),
-    maxDate: (0, _dateUtils.applyDefaultDate)(utils, themeProps.maxDate, defaultDates.maxDate)
+  const validationProps = (0, _useDateManager.useApplyDefaultValuesToDateValidationProps)(themeProps);
+  return (0, _extends2.default)({}, themeProps, validationProps, {
+    monthsPerRow: themeProps.monthsPerRow ?? 3
   });
 }
 const MonthCalendarRoot = (0, _styles.styled)('div', {