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

package/modern/DateCalendar/DayCalendar.js

@@ -1,6 +1,8 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["parentProps", "day", "focusableDay", "selectedDays", "isDateDisabled", "currentMonthNumber", "isViewFocused"],
+const _excluded = ["parentProps", "day", "focusedDay", "selectedDays", "isDateDisabled", "currentMonthNumber", "isViewFocused"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -8,7 +10,7 @@ import Typography from '@mui/material/Typography';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, unstable_useControlled as useControlled } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
 import { PickersDay } from "../PickersDay/PickersDay.js";
 import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
@@ -135,7 +137,7 @@ function WrappedDay(_ref) {
   let {
       parentProps,
       day,
-      focusableDay,
+      focusedDay,
       selectedDays,
       isDateDisabled,
       currentMonthNumber,
@@ -156,7 +158,8 @@ function WrappedDay(_ref) {
   const {
     ownerState
   } = usePickerPrivateContext();
-  const isFocusableDay = focusableDay !== null && utils.isSameDay(day, focusableDay);
+  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]);
@@ -198,7 +201,7 @@ function WrappedDay(_ref) {
   return /*#__PURE__*/_jsx(Day, _extends({}, dayProps, {
     day: day,
     disabled: isDisabled,
-    autoFocus: isViewFocused && isFocusableDay,
+    autoFocus: !outsideCurrentMonth && isFocusedDay,
     today: isToday,
     outsideCurrentMonth: outsideCurrentMonth,
     isFirstVisibleCell: isFirstVisibleCell,
@@ -249,7 +252,6 @@ export function DayCalendar(inProps) {
     gridLabelId,
     displayWeekNumber,
     fixedWeekNumber,
-    autoFocus,
     timezone
   } = props;
   const now = useNow(timezone);
@@ -266,13 +268,6 @@ export function DayCalendar(inProps) {
     timezone
   });
   const translations = usePickerTranslations();
-  const [internalHasFocus, setInternalHasFocus] = useControlled({
-    name: 'DayCalendar',
-    state: 'hasFocus',
-    controlled: hasFocus,
-    default: autoFocus ?? false
-  });
-  const [internalFocusedDay, setInternalFocusedDay] = React.useState(() => focusedDay || now);
   const handleDaySelect = useEventCallback(day => {
     if (readOnly) {
       return;
@@ -282,9 +277,7 @@ export function DayCalendar(inProps) {
   const focusDay = day => {
     if (!isDateDisabled(day)) {
       onFocusedDayChange(day);
-      setInternalFocusedDay(day);
       onFocusedViewChange?.(true);
-      setInternalHasFocus(true);
     }
   };
   const handleKeyDown = useEventCallback((event, day) => {
@@ -351,7 +344,7 @@ export function DayCalendar(inProps) {
   });
   const handleFocus = useEventCallback((event, day) => focusDay(day));
   const handleBlur = useEventCallback((event, day) => {
-    if (internalHasFocus && utils.isSameDay(internalFocusedDay, day)) {
+    if (focusedDay != null && utils.isSameDay(focusedDay, day)) {
       onFocusedViewChange?.(false);
     }
   });
@@ -363,23 +356,6 @@ export function DayCalendar(inProps) {
   const transitionKey = `${currentYearNumber}-${currentMonthNumber}`;
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const slideNodeRef = React.useMemo(() => /*#__PURE__*/React.createRef(), [transitionKey]);
-  const focusableDay = React.useMemo(() => {
-    const startOfMonth = utils.startOfMonth(currentMonth);
-    const endOfMonth = utils.endOfMonth(currentMonth);
-    if (isDateDisabled(internalFocusedDay) || utils.isAfterDay(internalFocusedDay, endOfMonth) || utils.isBeforeDay(internalFocusedDay, startOfMonth)) {
-      return findClosestEnabledDate({
-        utils,
-        date: internalFocusedDay,
-        minDate: startOfMonth,
-        maxDate: endOfMonth,
-        disablePast,
-        disableFuture,
-        isDateDisabled,
-        timezone
-      });
-    }
-    return internalFocusedDay;
-  }, [currentMonth, disableFuture, disablePast, internalFocusedDay, isDateDisabled, utils, timezone]);
   const weeksToDisplay = React.useMemo(() => {
     const toDisplay = utils.getWeekArray(currentMonth);
     let nextMonth = utils.addMonths(currentMonth, 1);
@@ -446,14 +422,14 @@ export function DayCalendar(inProps) {
             parentProps: props,
             day: day,
             selectedDays: validSelectedDays,
-            focusableDay: focusableDay,
+            isViewFocused: hasFocus,
+            focusedDay: focusedDay,
             onKeyDown: handleKeyDown,
             onFocus: handleFocus,
             onBlur: handleBlur,
             onDaySelect: handleDaySelect,
             isDateDisabled: isDateDisabled,
-            currentMonthNumber: currentMonthNumber,
-            isViewFocused: internalHasFocus
+            currentMonthNumber: currentMonthNumber
             // fix issue of announcing column 1 as column 2 when `displayWeekNumber` is enabled
             ,
             "aria-colindex": dayIndex + 1

package/modern/DateCalendar/PickersFadeTransitionGroup.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { PickersFadeTransitionGroupClasses } from "./pickersFadeTransitionGroupClasses.js";
+export interface PickersFadeTransitionGroupProps {
+  children: React.ReactElement<any>;
+  className?: string;
+  reduceAnimations: boolean;
+  transKey: React.Key;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PickersFadeTransitionGroupClasses>;
+}
+/**
+ * @ignore - do not document.
+ */
+export declare function PickersFadeTransitionGroup(inProps: PickersFadeTransitionGroupProps): React.JSX.Element;

package/modern/DateCalendar/PickersSlideTransition.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { PickersSlideTransitionClasses } from "./pickersSlideTransitionClasses.js";
+export type SlideDirection = 'right' | 'left';
+export interface ExportedSlideTransitionProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PickersSlideTransitionClasses>;
+}
+export interface SlideTransitionProps extends Omit<CSSTransitionProps, 'timeout'>, ExportedSlideTransitionProps {
+  children: React.ReactElement<any>;
+  className?: string;
+  reduceAnimations: boolean;
+  slideDirection: SlideDirection;
+  transKey: React.Key;
+}
+/**
+ * @ignore - do not document.
+ */
+export declare function PickersSlideTransition(inProps: SlideTransitionProps): React.JSX.Element;

package/modern/DateCalendar/dateCalendarClasses.d.ts

@@ -0,0 +1,9 @@
+export interface DateCalendarClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the transition group element. */
+  viewTransitionContainer: string;
+}
+export type DateCalendarClassKey = keyof DateCalendarClasses;
+export declare const getDateCalendarUtilityClass: (slot: string) => string;
+export declare const dateCalendarClasses: DateCalendarClasses;

package/modern/DateCalendar/dayCalendarClasses.d.ts

@@ -0,0 +1,23 @@
+export interface DayCalendarClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the header element. */
+  header: string;
+  /** Styles applied to the week day label element. */
+  weekDayLabel: string;
+  /** Styles applied to the loading container element. */
+  loadingContainer: string;
+  /** Styles applied to the slide transition element. */
+  slideTransition: string;
+  /** Styles applied to the month container element. */
+  monthContainer: string;
+  /** Styles applied to the week container element. */
+  weekContainer: string;
+  /** Styles applied to the week number header */
+  weekNumberLabel: string;
+  /** Styles applied to the week number element */
+  weekNumber: string;
+}
+export type DayCalendarClassKey = keyof DayCalendarClasses;
+export declare const getDayCalendarUtilityClass: (slot: string) => string;
+export declare const dayCalendarClasses: DayCalendarClasses;

package/modern/DateCalendar/index.d.ts

@@ -0,0 +1,13 @@
+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";
+export type { DayCalendarClassKey, DayCalendarClasses } from './dayCalendarClasses';
+export type { PickersFadeTransitionGroupProps } from './PickersFadeTransitionGroup';
+export { pickersFadeTransitionGroupClasses } from "./pickersFadeTransitionGroupClasses.js";
+export type { PickersFadeTransitionGroupClassKey, PickersFadeTransitionGroupClasses } from './pickersFadeTransitionGroupClasses';
+export { pickersSlideTransitionClasses } from "./pickersSlideTransitionClasses.js";
+export type { PickersSlideTransitionClassKey, PickersSlideTransitionClasses } from './pickersSlideTransitionClasses';
+export type { ExportedSlideTransitionProps } from './PickersSlideTransition';

package/modern/DateCalendar/pickersFadeTransitionGroupClasses.d.ts

@@ -0,0 +1,7 @@
+export interface PickersFadeTransitionGroupClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export type PickersFadeTransitionGroupClassKey = keyof PickersFadeTransitionGroupClasses;
+export declare const getPickersFadeTransitionGroupUtilityClass: (slot: string) => string;
+export declare const pickersFadeTransitionGroupClasses: PickersFadeTransitionGroupClasses;

package/modern/DateCalendar/pickersSlideTransitionClasses.d.ts

@@ -0,0 +1,19 @@
+export interface PickersSlideTransitionClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to content element sliding in from left. */
+  'slideEnter-left': string;
+  /** Styles applied to content element sliding in from right. */
+  'slideEnter-right': string;
+  /** Styles applied to the element entering (transitioning into) the container. */
+  slideEnterActive: string;
+  /** Styles applied to the element leaving (transitioning out of) the container. */
+  slideExit: string;
+  /** Styles applied to the element on the left leaving (transitioning out of) the container. */
+  'slideExitActiveLeft-left': string;
+  /** Styles applied to the element on the right leaving (transitioning out of) the container. */
+  'slideExitActiveLeft-right': string;
+}
+export type PickersSlideTransitionClassKey = keyof PickersSlideTransitionClasses;
+export declare const getPickersSlideTransitionUtilityClass: (slot: string) => string;
+export declare const pickersSlideTransitionClasses: PickersSlideTransitionClasses;

package/modern/DateCalendar/useCalendarState.d.ts

@@ -0,0 +1,27 @@
+import { SlideDirection } from "./PickersSlideTransition.js";
+import { PickersTimezone, PickerValidDate } from "../models/index.js";
+import { DateCalendarDefaultizedProps } from "./DateCalendar.types.js";
+interface CalendarState {
+  currentMonth: PickerValidDate;
+  focusedDay: PickerValidDate | null;
+  isMonthSwitchingAnimating: boolean;
+  slideDirection: SlideDirection;
+}
+interface UseCalendarStateParameters extends Pick<DateCalendarDefaultizedProps, 'referenceDate' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'onYearChange' | 'reduceAnimations' | 'shouldDisableDate'> {
+  value: PickerValidDate | null;
+  timezone: PickersTimezone;
+  getCurrentMonthFromVisibleDate: (focusedDay: PickerValidDate, prevMonth: PickerValidDate) => PickerValidDate;
+}
+interface UseCalendarStateReturnValue {
+  referenceDate: PickerValidDate;
+  calendarState: CalendarState;
+  setVisibleDate: (parameters: SetVisibleDateParameters) => void;
+  isDateDisabled: (day: PickerValidDate | null) => boolean;
+  onMonthSwitchingAnimationEnd: () => void;
+}
+export declare const useCalendarState: (params: UseCalendarStateParameters) => UseCalendarStateReturnValue;
+interface SetVisibleDateParameters {
+  target: PickerValidDate;
+  reason: 'header-navigation' | 'cell-interaction' | 'controlled-value-change';
+}
+export {};

package/modern/DateCalendar/useCalendarState.js

@@ -7,13 +7,15 @@ import { useIsDateDisabled } from "./useIsDateDisabled.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { SECTION_TYPE_GRANULARITY } from "../internals/utils/getDefaultReferenceDate.js";
-export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayFocus, utils) => (state, action) => {
+import { findClosestEnabledDate } from "../internals/utils/date-utils.js";
+const createCalendarStateReducer = (reduceAnimations, utils) => (state, action) => {
   switch (action.type) {
-    case 'changeMonth':
+    case 'setVisibleDate':
       return _extends({}, state, {
         slideDirection: action.direction,
-        currentMonth: action.newMonth,
-        isMonthSwitchingAnimating: !reduceAnimations
+        currentMonth: action.month,
+        isMonthSwitchingAnimating: !utils.isSameMonth(action.month, state.currentMonth) && !reduceAnimations && !action.skipAnimation,
+        focusedDay: action.focusedDay
       });
     case 'changeMonthTimezone':
       {
@@ -33,19 +35,6 @@ export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMont
       return _extends({}, state, {
         isMonthSwitchingAnimating: false
       });
-    case 'changeFocusedDay':
-      {
-        if (state.focusedDay != null && action.focusedDay != null && utils.isSameDay(action.focusedDay, state.focusedDay)) {
-          return state;
-        }
-        const needMonthSwitch = action.focusedDay != null && !disableSwitchToMonthOnDayFocus && !utils.isSameMonth(state.currentMonth, action.focusedDay);
-        return _extends({}, state, {
-          focusedDay: action.focusedDay,
-          isMonthSwitchingAnimating: needMonthSwitch && !reduceAnimations && !action.withoutMonthSwitchingAnimation,
-          currentMonth: needMonthSwitch ? utils.startOfMonth(action.focusedDay) : state.currentMonth,
-          slideDirection: action.focusedDay != null && utils.isAfterDay(action.focusedDay, state.currentMonth) ? 'left' : 'right'
-        });
-      }
     default:
       throw new Error('missing support');
   }
@@ -56,16 +45,17 @@ export const useCalendarState = params => {
     referenceDate: referenceDateProp,
     disableFuture,
     disablePast,
-    disableSwitchToMonthOnDayFocus = false,
     maxDate,
     minDate,
     onMonthChange,
+    onYearChange,
     reduceAnimations,
     shouldDisableDate,
-    timezone
+    timezone,
+    getCurrentMonthFromVisibleDate
   } = params;
   const utils = useUtils();
-  const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils)).current;
+  const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), utils)).current;
   const referenceDate = React.useMemo(() => {
     return singleItemValueManager.getInitialReferenceValue({
       value,
@@ -85,6 +75,14 @@ export const useCalendarState = params => {
     currentMonth: utils.startOfMonth(referenceDate),
     slideDirection: 'left'
   });
+  const isDateDisabled = useIsDateDisabled({
+    shouldDisableDate,
+    minDate,
+    maxDate,
+    disableFuture,
+    disablePast,
+    timezone
+  });
 
   // Ensure that `calendarState.currentMonth` timezone is updated when `referenceDate` (or timezone changes)
   // https://github.com/mui/mui-x/issues/10804
@@ -94,53 +92,65 @@ export const useCalendarState = params => {
       newTimezone: utils.getTimezone(referenceDate)
     });
   }, [referenceDate, utils]);
-  const handleChangeMonth = React.useCallback(payload => {
-    dispatch(_extends({
-      type: 'changeMonth'
-    }, payload));
-    if (onMonthChange) {
-      onMonthChange(payload.newMonth);
-    }
-  }, [onMonthChange]);
-  const changeMonth = React.useCallback(newDate => {
-    const newDateRequested = newDate;
-    if (utils.isSameMonth(newDateRequested, calendarState.currentMonth)) {
+  const setVisibleDate = useEventCallback(({
+    target,
+    reason
+  }) => {
+    if (reason === 'cell-interaction' && calendarState.focusedDay != null && utils.isSameDay(target, calendarState.focusedDay)) {
       return;
     }
-    handleChangeMonth({
-      newMonth: utils.startOfMonth(newDateRequested),
-      direction: utils.isAfterDay(newDateRequested, calendarState.currentMonth) ? 'left' : 'right'
+    const skipAnimation = reason === 'cell-interaction';
+    let month;
+    let focusedDay;
+    if (reason === 'cell-interaction') {
+      month = getCurrentMonthFromVisibleDate(target, calendarState.currentMonth);
+      focusedDay = target;
+    } else {
+      month = utils.isSameMonth(target, calendarState.currentMonth) ? calendarState.currentMonth : utils.startOfMonth(target);
+      focusedDay = target;
+
+      // If the date is disabled, we try to find a non-disabled date inside the same month.
+      if (isDateDisabled(focusedDay)) {
+        const startOfMonth = utils.startOfMonth(target);
+        const endOfMonth = utils.endOfMonth(target);
+        focusedDay = findClosestEnabledDate({
+          utils,
+          date: focusedDay,
+          minDate: utils.isBefore(minDate, startOfMonth) ? startOfMonth : minDate,
+          maxDate: utils.isAfter(maxDate, endOfMonth) ? endOfMonth : maxDate,
+          disablePast,
+          disableFuture,
+          isDateDisabled,
+          timezone
+        });
+      }
+    }
+    const hasChangedMonth = !utils.isSameMonth(calendarState.currentMonth, month);
+    const hasChangedYear = !utils.isSameYear(calendarState.currentMonth, month);
+    if (hasChangedMonth) {
+      onMonthChange?.(month);
+    }
+    if (hasChangedYear) {
+      onYearChange?.(utils.startOfYear(month));
+    }
+    dispatch({
+      type: 'setVisibleDate',
+      month,
+      direction: utils.isAfterDay(month, calendarState.currentMonth) ? 'left' : 'right',
+      focusedDay: calendarState.focusedDay != null && focusedDay != null && utils.isSameDay(focusedDay, calendarState.focusedDay) ? calendarState.focusedDay : focusedDay,
+      skipAnimation
     });
-  }, [calendarState.currentMonth, handleChangeMonth, utils]);
-  const isDateDisabled = useIsDateDisabled({
-    shouldDisableDate,
-    minDate,
-    maxDate,
-    disableFuture,
-    disablePast,
-    timezone
   });
   const onMonthSwitchingAnimationEnd = React.useCallback(() => {
     dispatch({
       type: 'finishMonthSwitchingAnimation'
     });
   }, []);
-  const changeFocusedDay = useEventCallback((newFocusedDate, withoutMonthSwitchingAnimation) => {
-    if (!isDateDisabled(newFocusedDate)) {
-      dispatch({
-        type: 'changeFocusedDay',
-        focusedDay: newFocusedDate,
-        withoutMonthSwitchingAnimation
-      });
-    }
-  });
   return {
     referenceDate,
     calendarState,
-    changeMonth,
-    changeFocusedDay,
+    setVisibleDate,
     isDateDisabled,
-    onMonthSwitchingAnimationEnd,
-    handleChangeMonth
+    onMonthSwitchingAnimationEnd
   };
 };

package/modern/DateCalendar/useIsDateDisabled.d.ts

@@ -0,0 +1,13 @@
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { ValidateDateProps } from "../validation/index.js";
+import { PickerValidDate, TimezoneProps } from "../models/index.js";
+export declare const useIsDateDisabled: ({
+  shouldDisableDate,
+  shouldDisableMonth,
+  shouldDisableYear,
+  minDate,
+  maxDate,
+  disableFuture,
+  disablePast,
+  timezone
+}: ValidateDateProps & DefaultizedProps<TimezoneProps, "timezone">) => (day: PickerValidDate | null) => boolean;

package/modern/DateField/DateField.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DateFieldProps } from "./DateField.types.js";
+type DateFieldComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DateFieldProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [DateField](http://mui.com/x/react-date-pickers/date-field/)
+ * - [Fields](https://mui.com/x/react-date-pickers/fields/)
+ *
+ * API:
+ *
+ * - [DateField API](https://mui.com/x/api/date-pickers/date-field/)
+ */
+declare const DateField: DateFieldComponent;
+export { DateField };

package/modern/DateField/DateField.js

@@ -112,7 +112,8 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
-   * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
+   * Props applied to the [`FormHelperText`](https://mui.com/material-ui/api/form-helper-text/) element.
+   * @deprecated Use `slotProps.formHelperText` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   FormHelperTextProps: PropTypes.object,
   /**
@@ -137,19 +138,22 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   id: PropTypes.string,
   /**
-   * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
+   * Props applied to the [`InputLabel`](https://mui.com/material-ui/api/input-label/) element.
    * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
+   * @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputLabelProps: PropTypes.object,
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   * @deprecated Use `slotProps.htmlInput` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   inputProps: PropTypes.object,
   /**
    * Props applied to the Input element.
-   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
-   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
+   * It will be a [`FilledInput`](https://mui.com/material-ui/api/filled-input/),
+   * [`OutlinedInput`](https://mui.com/material-ui/api/outlined-input/) or [`Input`](https://mui.com/material-ui/api/input/)
    * component depending on the `variant` prop value.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps: PropTypes.object,
   /**
@@ -210,7 +214,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
   onSelectedSectionsChange: PropTypes.func,
   /**
    * The position at which the opening button is placed.
-   * If there is no picker to open, the button is not rendered
+   * If there is no Picker to open, the button is not rendered
    * @default 'end'
    */
   openPickerButtonPosition: PropTypes.oneOf(['end', 'start']),
@@ -279,6 +283,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
   shouldRespectLeadingZeros: PropTypes.bool,
   /**
    * The size of the component.
+   * @default 'medium'
    */
   size: PropTypes.oneOf(['medium', 'small']),
   /**

package/modern/DateField/DateField.types.d.ts

@@ -0,0 +1,22 @@
+import { MakeOptional } from '@mui/x-internals/types';
+import { DateValidationError, BuiltInFieldTextFieldProps } from "../models/index.js";
+import { UseFieldInternalProps } from "../internals/hooks/useField/index.js";
+import { ExportedValidateDateProps } from "../validation/validateDate.js";
+import { PickerValue } from "../internals/models/index.js";
+import { ExportedPickerFieldUIProps, PickerFieldUISlotProps, PickerFieldUISlots } from "../internals/components/PickerFieldUI.js";
+export interface UseDateFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateValidationError>, 'format'>, ExportedValidateDateProps, ExportedPickerFieldUIProps {}
+export type DateFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = UseDateFieldProps<TEnableAccessibleFieldDOMStructure> & Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseDateFieldProps<TEnableAccessibleFieldDOMStructure>> & {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateFieldSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateFieldSlotProps;
+};
+export type DateFieldOwnerState<TEnableAccessibleFieldDOMStructure extends boolean> = DateFieldProps<TEnableAccessibleFieldDOMStructure>;
+export interface DateFieldSlots extends PickerFieldUISlots {}
+export interface DateFieldSlotProps extends PickerFieldUISlotProps {}

package/modern/DateField/index.d.ts

@@ -0,0 +1,3 @@
+export { DateField } from "./DateField.js";
+export { useDateField as unstable_useDateField } from "./useDateField.js";
+export type { UseDateFieldProps, DateFieldProps } from './DateField.types';

package/modern/DateField/useDateField.d.ts

@@ -0,0 +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">>;

package/modern/DateField/useDateField.js

@@ -20,6 +20,6 @@ export const useDateField = props => {
     fieldValueManager: manager.internal_fieldValueManager,
     validator: manager.validator,
     valueType: manager.valueType,
-    getOpenPickerButtonAriaLabel: manager.internal_getOpenPickerButtonAriaLabel
+    getOpenPickerButtonAriaLabel: manager.internal_useOpenPickerButtonAriaLabel()
   });
 };

package/modern/DatePicker/DatePicker.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DatePickerProps } from "./DatePicker.types.js";
+type DatePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DatePickerProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [DatePicker](https://mui.com/x/react-date-pickers/date-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [DatePicker API](https://mui.com/x/api/date-pickers/date-picker/)
+ */
+declare const DatePicker: DatePickerComponent;
+export { DatePicker };

package/modern/DatePicker/DatePicker.js

@@ -98,7 +98,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   disableHighlightToday: PropTypes.bool,
   /**
-   * If `true`, the open picker button will not be rendered (renders only the field).
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
    * @default false
    */
   disableOpenPicker: PropTypes.bool,

package/modern/DatePicker/DatePicker.types.d.ts

@@ -0,0 +1,38 @@
+import { DesktopDatePickerProps, DesktopDatePickerSlots, DesktopDatePickerSlotProps } from "../DesktopDatePicker/index.js";
+import { BaseSingleInputFieldProps } from "../internals/models/index.js";
+import { MobileDatePickerProps, MobileDatePickerSlots, MobileDatePickerSlotProps } from "../MobileDatePicker/index.js";
+import { ValidateDateProps } from "../validation/validateDate.js";
+export interface DatePickerSlots extends DesktopDatePickerSlots, MobileDatePickerSlots {}
+export interface DatePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDatePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileDatePickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
+export interface DatePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends DesktopDatePickerProps<TEnableAccessibleFieldDOMStructure>, MobileDatePickerProps<TEnableAccessibleFieldDOMStructure> {
+  /**
+   * CSS media query when `Mobile` mode will be changed to `Desktop`.
+   * @default '@media (pointer: fine)'
+   * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+   */
+  desktopModeMediaQuery?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DatePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DatePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+  /**
+   * Years rendered per row.
+   * @default 4 on desktop, 3 on mobile
+   */
+  yearsPerRow?: 3 | 4;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   */
+  closeOnSelect?: boolean;
+}
+/**
+ * Props the field can receive when used inside a Date Picker (<DatePicker />, <DesktopDatePicker /> or <MobileDatePicker /> component).
+ */
+export type DatePickerFieldProps = ValidateDateProps & BaseSingleInputFieldProps;