@mui/x-date-pickers 7.22.3 → 8.0.0-alpha.1

package/DateCalendar/DateCalendar.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "referenceDate", "disableFuture", "disablePast", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsOrder", "yearsPerRow", "monthsPerRow", "timezone"];
+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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -24,11 +24,9 @@ import { getDateCalendarUtilityClass } from "./dateCalendarClasses.js";
 import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithTimezone.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { VIEW_HEIGHT } from "../internals/constants/dimensions.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     viewTransitionContainer: ['viewTransitionContainer']
@@ -84,6 +82,9 @@ const DateCalendarViewTransitionContainer = styled(PickersFadeTransitionGroup, {
  */
 export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps, ref) {
   const utils = useUtils();
+  const {
+    ownerState
+  } = usePickerPrivateContext();
   const id = useId();
   const props = useDateCalendarDefaultizedProps(inProps, 'MuiDateCalendar');
   const {
@@ -105,6 +106,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
       views,
       openTo,
       className,
+      classes: classesProp,
       disabled,
       readOnly,
       minDate,
@@ -135,6 +137,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager
   });
@@ -203,7 +206,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
       timezone,
       labelId: gridLabelId
     },
-    ownerState: props
+    ownerState
   });
   const handleDateMonthChange = useEventCallback(newDate => {
     const startOfMonth = utils.startOfMonth(newDate);
@@ -262,8 +265,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     }
   }, [value]); // eslint-disable-line
 
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
   const baseDateValidationProps = {
     disablePast,
     disableFuture,
@@ -365,9 +367,9 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   className: PropTypes.string,
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {TDate} date The date of the day of week provided by the adapter.
+   * @param {PickerValidDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
-   * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
@@ -376,7 +378,8 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    */
   defaultValue: PropTypes.object,
   /**
-   * If `true`, the picker and text field are disabled.
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: PropTypes.bool,
@@ -447,8 +450,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   onFocusedViewChange: PropTypes.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: PropTypes.func,
   /**
@@ -459,8 +461,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   onViewChange: PropTypes.func,
   /**
    * Callback fired on year change.
-   * @template TDate
-   * @param {TDate} year The new year.
+   * @param {PickerValidDate} year The new year.
    */
   onYearChange: PropTypes.func,
   /**
@@ -470,7 +471,8 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    */
   openTo: PropTypes.oneOf(['day', 'month', 'year']),
   /**
-   * Make picker read only.
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
    * @default false
    */
   readOnly: PropTypes.bool,
@@ -495,22 +497,19 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    *
    * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
-   * @template TDate
-   * @param {TDate} day The date to test.
+   * @param {PickerValidDate} day The date to test.
    * @returns {boolean} If `true` the date will be disabled.
    */
   shouldDisableDate: PropTypes.func,
   /**
    * Disable specific month.
-   * @template TDate
-   * @param {TDate} month The month to test.
+   * @param {PickerValidDate} month The month to test.
    * @returns {boolean} If `true`, the month will be disabled.
    */
   shouldDisableMonth: PropTypes.func,
   /**
    * Disable specific year.
-   * @template TDate
-   * @param {TDate} year The year to test.
+   * @param {PickerValidDate} year The year to test.
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: PropTypes.func,

package/DateCalendar/DateCalendar.types.d.ts

@@ -2,37 +2,29 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { SlotComponentProps } from '@mui/utils';
+import { DefaultizedProps } from '@mui/x-internals/types';
 import { PickersCalendarHeader, PickersCalendarHeaderProps, PickersCalendarHeaderSlots, PickersCalendarHeaderSlotProps } from '../PickersCalendarHeader';
 import { DayCalendarSlots, DayCalendarSlotProps, ExportedDayCalendarProps } from './DayCalendar';
 import { DateCalendarClasses } from './dateCalendarClasses';
-import { BaseDateValidationProps, YearValidationProps, MonthValidationProps, DayValidationProps } from '../internals/models/validation';
+import { BaseDateValidationProps } from '../internals/models/validation';
 import { ExportedUseViewsOptions } from '../internals/hooks/useViews';
-import { DateView, PickerValidDate, TimezoneProps } from '../models';
-import { DefaultizedProps } from '../internals/models/helpers';
+import { DateView, PickerOwnerState, PickerValidDate, TimezoneProps } from '../models';
 import { ExportedYearCalendarProps, YearCalendarSlots, YearCalendarSlotProps } from '../YearCalendar/YearCalendar.types';
 import { ExportedMonthCalendarProps, MonthCalendarSlots, MonthCalendarSlotProps } from '../MonthCalendar/MonthCalendar.types';
-export interface DateCalendarSlots<TDate extends PickerValidDate> extends PickersCalendarHeaderSlots, DayCalendarSlots<TDate>, MonthCalendarSlots, YearCalendarSlots {
+import { ExportedValidateDateProps } from '../validation/validateDate';
+import { FormProps } from '../internals/models/formProps';
+export interface DateCalendarSlots extends PickersCalendarHeaderSlots, DayCalendarSlots, MonthCalendarSlots, YearCalendarSlots {
     /**
      * Custom component for calendar header.
      * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
      * @default PickersCalendarHeader
      */
-    calendarHeader?: React.ElementType<PickersCalendarHeaderProps<TDate>>;
+    calendarHeader?: React.ElementType<PickersCalendarHeaderProps>;
 }
-export interface DateCalendarSlotProps<TDate extends PickerValidDate> extends PickersCalendarHeaderSlotProps<TDate>, DayCalendarSlotProps<TDate>, MonthCalendarSlotProps, YearCalendarSlotProps {
-    calendarHeader?: SlotComponentProps<typeof PickersCalendarHeader, {}, DateCalendarProps<TDate>>;
+export interface DateCalendarSlotProps extends PickersCalendarHeaderSlotProps, DayCalendarSlotProps, MonthCalendarSlotProps, YearCalendarSlotProps {
+    calendarHeader?: SlotComponentProps<typeof PickersCalendarHeader, {}, PickerOwnerState>;
 }
-export interface ExportedDateCalendarProps<TDate extends PickerValidDate> extends ExportedDayCalendarProps<TDate>, ExportedMonthCalendarProps, ExportedYearCalendarProps, BaseDateValidationProps<TDate>, DayValidationProps<TDate>, YearValidationProps<TDate>, MonthValidationProps<TDate>, TimezoneProps {
-    /**
-     * If `true`, the picker and text field are disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Make picker read only.
-     * @default false
-     */
-    readOnly?: boolean;
+export interface ExportedDateCalendarProps extends ExportedDayCalendarProps, ExportedMonthCalendarProps, ExportedYearCalendarProps, ExportedValidateDateProps, TimezoneProps, FormProps {
     /**
      * If `true`, disable heavy animations.
      * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
@@ -46,33 +38,31 @@ export interface ExportedDateCalendarProps<TDate extends PickerValidDate> extend
     renderLoading?: () => React.ReactNode;
     /**
      * Callback fired on year change.
-     * @template TDate
-     * @param {TDate} year The new year.
+     * @param {PickerValidDate} year The new year.
      */
-    onYearChange?: (year: TDate) => void;
+    onYearChange?: (year: PickerValidDate) => void;
     /**
      * Callback fired on month change.
-     * @template TDate
-     * @param {TDate} month The new month.
+     * @param {PickerValidDate} month The new month.
      */
-    onMonthChange?: (month: TDate) => void;
+    onMonthChange?: (month: PickerValidDate) => void;
 }
-export interface DateCalendarProps<TDate extends PickerValidDate> extends ExportedDateCalendarProps<TDate>, ExportedUseViewsOptions<DateView> {
+export interface DateCalendarProps extends ExportedDateCalendarProps, ExportedUseViewsOptions<PickerValidDate | null, DateView> {
     /**
      * The selected value.
      * Used when the component is controlled.
      */
-    value?: TDate | null;
+    value?: PickerValidDate | null;
     /**
      * The default selected value.
      * Used when the component is not controlled.
      */
-    defaultValue?: TDate | null;
+    defaultValue?: PickerValidDate | null;
     /**
      * The date used to generate the new value when both `value` and `defaultValue` are empty.
      * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
      */
-    referenceDate?: TDate;
+    referenceDate?: PickerValidDate;
     className?: string;
     /**
      * Override or extend the styles applied to the component.
@@ -86,11 +76,11 @@ export interface DateCalendarProps<TDate extends PickerValidDate> extends Export
      * Overridable component slots.
      * @default {}
      */
-    slots?: DateCalendarSlots<TDate>;
+    slots?: DateCalendarSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DateCalendarSlotProps<TDate>;
+    slotProps?: DateCalendarSlotProps;
 }
-export type DateCalendarDefaultizedProps<TDate extends PickerValidDate> = DefaultizedProps<DateCalendarProps<TDate>, 'views' | 'openTo' | 'loading' | 'reduceAnimations' | 'renderLoading' | keyof BaseDateValidationProps<TDate>>;
+export type DateCalendarDefaultizedProps = DefaultizedProps<DateCalendarProps, 'views' | 'openTo' | 'loading' | 'reduceAnimations' | 'renderLoading' | keyof BaseDateValidationProps>;

package/DateCalendar/DayCalendar.d.ts

@@ -1,26 +1,29 @@
 import * as React from 'react';
+import { DefaultizedProps, SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { PickersDayProps, ExportedPickersDayProps } from '../PickersDay/PickersDay';
 import { PickerOnChangeFn } from '../internals/hooks/useViews';
 import { SlideDirection, SlideTransitionProps } from './PickersSlideTransition';
 import { BaseDateValidationProps, DayValidationProps, MonthValidationProps, YearValidationProps } from '../internals/models/validation';
 import { DayCalendarClasses } from './dayCalendarClasses';
-import { PickerValidDate, TimezoneProps } from '../models';
-import { DefaultizedProps, SlotComponentPropsFromProps } from '../internals/models/helpers';
-export interface DayCalendarSlots<TDate extends PickerValidDate> {
+import { PickerOwnerState, PickerValidDate, TimezoneProps } from '../models';
+import { FormProps } from '../internals/models/formProps';
+export interface DayCalendarSlots {
     /**
      * Custom component for day.
      * Check the [PickersDay](https://mui.com/x/api/date-pickers/pickers-day/) component.
      * @default PickersDay
      */
-    day?: React.ElementType<PickersDayProps<TDate>>;
+    day?: React.ElementType<PickersDayProps>;
 }
-export interface DayCalendarSlotProps<TDate extends PickerValidDate> {
-    day?: SlotComponentPropsFromProps<PickersDayProps<TDate>, {}, DayCalendarProps<TDate> & {
-        day: TDate;
-        selected: boolean;
-    }>;
+export interface DayCalendarSlotProps {
+    day?: SlotComponentPropsFromProps<PickersDayProps, {}, PickerDayOwnerState>;
 }
-export interface ExportedDayCalendarProps<TDate extends PickerValidDate> extends ExportedPickersDayProps {
+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.
      * Can be used to preload information and show it in calendar.
@@ -35,11 +38,11 @@ export interface ExportedDayCalendarProps<TDate extends PickerValidDate> extends
     renderLoading?: () => React.ReactNode;
     /**
      * Formats the day of week displayed in the calendar header.
-     * @param {TDate} date The date of the day of week provided by the adapter.
+     * @param {PickerValidDate} date The date of the day of week provided by the adapter.
      * @returns {string} The name to display.
-     * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+     * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
      */
-    dayOfWeekFormatter?: (date: TDate) => string;
+    dayOfWeekFormatter?: (date: PickerValidDate) => string;
     /**
      * If `true`, the week number will be display in the calendar.
      */
@@ -50,18 +53,16 @@ export interface ExportedDayCalendarProps<TDate extends PickerValidDate> extends
      */
     fixedWeekNumber?: number;
 }
-export interface DayCalendarProps<TDate extends PickerValidDate> extends ExportedDayCalendarProps<TDate>, DayValidationProps<TDate>, MonthValidationProps<TDate>, YearValidationProps<TDate>, Required<BaseDateValidationProps<TDate>>, DefaultizedProps<TimezoneProps, 'timezone'> {
+export interface DayCalendarProps extends ExportedDayCalendarProps, DayValidationProps, MonthValidationProps, YearValidationProps, Required<BaseDateValidationProps>, DefaultizedProps<TimezoneProps, 'timezone'>, FormProps {
     autoFocus?: boolean;
     className?: string;
-    currentMonth: TDate;
-    selectedDays: (TDate | null)[];
-    onSelectedDaysChange: PickerOnChangeFn<TDate>;
-    disabled?: boolean;
-    focusedDay: TDate | null;
+    currentMonth: PickerValidDate;
+    selectedDays: (PickerValidDate | null)[];
+    onSelectedDaysChange: PickerOnChangeFn;
+    focusedDay: PickerValidDate | null;
     isMonthSwitchingAnimating: boolean;
-    onFocusedDayChange: (newFocusedDay: TDate) => void;
+    onFocusedDayChange: (newFocusedDay: PickerValidDate) => void;
     onMonthSwitchingAnimationEnd: () => void;
-    readOnly?: boolean;
     reduceAnimations: boolean;
     slideDirection: SlideDirection;
     TransitionProps?: Partial<SlideTransitionProps>;
@@ -76,14 +77,14 @@ export interface DayCalendarProps<TDate extends PickerValidDate> extends Exporte
      * Overridable component slots.
      * @default {}
      */
-    slots?: DayCalendarSlots<TDate>;
+    slots?: DayCalendarSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DayCalendarSlotProps<TDate>;
+    slotProps?: DayCalendarSlotProps;
 }
 /**
  * @ignore - do not document.
  */
-export declare function DayCalendar<TDate extends PickerValidDate>(inProps: DayCalendarProps<TDate>): React.JSX.Element;
+export declare function DayCalendar(inProps: DayCalendarProps): React.JSX.Element;

package/DateCalendar/DayCalendar.js

@@ -11,18 +11,16 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_useControlled as useControlled } from '@mui/utils';
 import clsx from 'clsx';
 import { PickersDay } from "../PickersDay/PickersDay.js";
-import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { useUtils, useNow } from "../internals/hooks/useUtils.js";
 import { DAY_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.js";
 import { PickersSlideTransition } from "./PickersSlideTransition.js";
 import { useIsDateDisabled } from "./useIsDateDisabled.js";
 import { findClosestEnabledDate, getWeekdays } from "../internals/utils/date-utils.js";
 import { getDayCalendarUtilityClass } from "./dayCalendarClasses.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     header: ['header'],
@@ -155,9 +153,13 @@ function WrappedDay(_ref) {
   } = parentProps;
   const utils = useUtils();
   const now = useNow(timezone);
+  const {
+    ownerState
+  } = usePickerPrivateContext();
   const isFocusableDay = focusableDay !== null && utils.isSameDay(day, focusableDay);
   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 Day = slots?.day ?? PickersDay;
   // We don't want to pass to ownerState down, to avoid re-rendering all the day whenever a prop changes.
   const _useSlotProps = useSlotProps({
@@ -171,13 +173,13 @@ function WrappedDay(_ref) {
         // it is used in date range dragging logic by accessing `dataset.timestamp`
         'data-timestamp': utils.toJsDate(day).valueOf()
       }, other),
-      ownerState: _extends({}, parentProps, {
+      ownerState: _extends({}, ownerState, {
         day,
-        selected: isSelected
+        isDayDisabled: isDisabled,
+        isDaySelected: isSelected
       })
     }),
     dayProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
-  const isDisabled = React.useMemo(() => disabled || isDateDisabled(day), [disabled, isDateDisabled, day]);
   const outsideCurrentMonth = React.useMemo(() => utils.getMonth(day) !== currentMonthNumber, [utils, day, currentMonthNumber]);
   const isFirstVisibleCell = React.useMemo(() => {
     const startOfMonth = utils.startOfMonth(utils.setMonth(day, currentMonthNumber));
@@ -220,6 +222,7 @@ export function DayCalendar(inProps) {
   const {
     onFocusedDayChange,
     className,
+    classes: classesProp,
     currentMonth,
     selectedDays,
     focusedDay,
@@ -250,7 +253,7 @@ export function DayCalendar(inProps) {
     timezone
   } = props;
   const now = useNow(timezone);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   const isRtl = useRtl();
   const isDateDisabled = useIsDateDisabled({
     shouldDisableDate,
@@ -262,7 +265,7 @@ export function DayCalendar(inProps) {
     disableFuture,
     timezone
   });
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const [internalHasFocus, setInternalHasFocus] = useControlled({
     name: 'DayCalendar',
     state: 'hasFocus',

package/DateCalendar/index.d.ts

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

package/DateCalendar/useCalendarState.d.ts

@@ -1,41 +1,41 @@
 import { SlideDirection } from './PickersSlideTransition';
 import { MuiPickersAdapter, PickersTimezone, PickerValidDate } from '../models';
 import { DateCalendarDefaultizedProps } from './DateCalendar.types';
-interface CalendarState<TDate extends PickerValidDate> {
-    currentMonth: TDate;
-    focusedDay: TDate | null;
+interface CalendarState {
+    currentMonth: PickerValidDate;
+    focusedDay: PickerValidDate | null;
     isMonthSwitchingAnimating: boolean;
     slideDirection: SlideDirection;
 }
 type ReducerAction<TType, TAdditional = {}> = {
     type: TType;
 } & TAdditional;
-interface ChangeMonthPayload<TDate extends PickerValidDate> {
+interface ChangeMonthPayload {
     direction: SlideDirection;
-    newMonth: TDate;
+    newMonth: PickerValidDate;
 }
-interface ChangeFocusedDayPayload<TDate extends PickerValidDate> {
-    focusedDay: TDate | null;
+interface ChangeFocusedDayPayload {
+    focusedDay: PickerValidDate | null;
     /**
      * The update does not trigger month switching animation.
      * For example: when selecting month from the month view.
      */
     withoutMonthSwitchingAnimation?: boolean;
 }
-export declare const createCalendarStateReducer: <TDate extends PickerValidDate>(reduceAnimations: boolean, disableSwitchToMonthOnDayFocus: boolean, utils: MuiPickersAdapter<TDate>) => (state: CalendarState<TDate>, action: ReducerAction<"finishMonthSwitchingAnimation"> | ReducerAction<"changeMonth", ChangeMonthPayload<TDate>> | ReducerAction<"changeMonthTimezone", {
+export declare const createCalendarStateReducer: (reduceAnimations: boolean, disableSwitchToMonthOnDayFocus: boolean, utils: MuiPickersAdapter) => (state: CalendarState, action: ReducerAction<"finishMonthSwitchingAnimation"> | ReducerAction<"changeMonth", ChangeMonthPayload> | ReducerAction<"changeMonthTimezone", {
     newTimezone: string;
-}> | ReducerAction<"changeFocusedDay", ChangeFocusedDayPayload<TDate>>) => CalendarState<TDate>;
-interface UseCalendarStateParams<TDate extends PickerValidDate> extends Pick<DateCalendarDefaultizedProps<TDate>, 'value' | 'referenceDate' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'reduceAnimations' | 'shouldDisableDate'> {
+}> | ReducerAction<"changeFocusedDay", ChangeFocusedDayPayload>) => CalendarState;
+interface UseCalendarStateParams extends Pick<DateCalendarDefaultizedProps, 'value' | 'referenceDate' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'reduceAnimations' | 'shouldDisableDate'> {
     disableSwitchToMonthOnDayFocus?: boolean;
     timezone: PickersTimezone;
 }
-export declare const useCalendarState: <TDate extends PickerValidDate>(params: UseCalendarStateParams<TDate>) => {
+export declare const useCalendarState: (params: UseCalendarStateParams) => {
     referenceDate: any;
-    calendarState: CalendarState<TDate>;
-    changeMonth: (newDate: TDate) => void;
-    changeFocusedDay: (newFocusedDate: TDate | null, withoutMonthSwitchingAnimation?: boolean) => void;
-    isDateDisabled: (day: TDate | null) => boolean;
+    calendarState: CalendarState;
+    changeMonth: (newDate: PickerValidDate) => void;
+    changeFocusedDay: (newFocusedDate: PickerValidDate | null, withoutMonthSwitchingAnimation?: boolean) => void;
+    isDateDisabled: (day: PickerValidDate | null) => boolean;
     onMonthSwitchingAnimationEnd: () => void;
-    handleChangeMonth: (payload: ChangeMonthPayload<TDate>) => void;
+    handleChangeMonth: (payload: ChangeMonthPayload) => void;
 };
 export {};

package/DateCalendar/useIsDateDisabled.d.ts

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

package/DateField/DateField.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { DateFieldProps } from './DateField.types';
-import { PickerValidDate } from '../models';
-type DateFieldComponent = (<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>(props: DateFieldProps<TDate, TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type DateFieldComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DateFieldProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/DateField/DateField.js

@@ -37,7 +37,7 @@ const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, inRe
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
-  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField);
+  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
     externalSlotProps: slotProps?.textField,
@@ -89,6 +89,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
   defaultValue: PropTypes.object,
   /**
    * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: PropTypes.bool,
@@ -103,7 +104,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   disablePast: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.bool,
   /**
@@ -218,8 +219,8 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   onSelectedSectionsChange: PropTypes.func,
   /**
-   * It prevents the user from changing the value of the field
-   * (not from interacting with the field).
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
    * @default false
    */
   readOnly: PropTypes.bool,
@@ -249,22 +250,19 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    *
    * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
-   * @template TDate
-   * @param {TDate} day The date to test.
+   * @param {PickerValidDate} day The date to test.
    * @returns {boolean} If `true` the date will be disabled.
    */
   shouldDisableDate: PropTypes.func,
   /**
    * Disable specific month.
-   * @template TDate
-   * @param {TDate} month The month to test.
+   * @param {PickerValidDate} month The month to test.
    * @returns {boolean} If `true`, the month will be disabled.
    */
   shouldDisableMonth: PropTypes.func,
   /**
    * Disable specific year.
-   * @template TDate
-   * @param {TDate} year The year to test.
+   * @param {PickerValidDate} year The year to test.
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: PropTypes.func,

package/DateField/DateField.types.d.ts

@@ -1,15 +1,14 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
+import { MakeOptional } from '@mui/x-internals/types';
 import TextField from '@mui/material/TextField';
 import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
 import { DateValidationError, FieldSection, PickerValidDate, BuiltInFieldTextFieldProps } from '../models';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
-import { MakeOptional } from '../internals/models/helpers';
-import { BaseDateValidationProps, DayValidationProps, MonthValidationProps, YearValidationProps } from '../internals/models/validation';
-export interface UseDateFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<TDate | null, TDate, FieldSection, TEnableAccessibleFieldDOMStructure, DateValidationError>, 'format'>, DayValidationProps<TDate>, MonthValidationProps<TDate>, YearValidationProps<TDate>, BaseDateValidationProps<TDate>, ExportedUseClearableFieldProps {
+import { ExportedValidateDateProps } from '../validation/validateDate';
+export interface UseDateFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, DateValidationError>, 'format'>, ExportedValidateDateProps, ExportedUseClearableFieldProps {
 }
-export type UseDateFieldComponentProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TChildProps extends {}> = Omit<TChildProps, keyof UseDateFieldProps<TDate, TEnableAccessibleFieldDOMStructure>> & UseDateFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
-export type DateFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = UseDateFieldComponentProps<TDate, TEnableAccessibleFieldDOMStructure, BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>> & {
+export type DateFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = UseDateFieldProps<TEnableAccessibleFieldDOMStructure> & Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseDateFieldProps<TEnableAccessibleFieldDOMStructure>> & {
     /**
      * Overridable component slots.
      * @default {}
@@ -19,9 +18,9 @@ export type DateFieldProps<TDate extends PickerValidDate, TEnableAccessibleField
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DateFieldSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: DateFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
 };
-export type DateFieldOwnerState<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> = DateFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
+export type DateFieldOwnerState<TEnableAccessibleFieldDOMStructure extends boolean> = DateFieldProps<TEnableAccessibleFieldDOMStructure>;
 export interface DateFieldSlots extends UseClearableFieldSlots {
     /**
      * Form control with an input to render the value.
@@ -29,6 +28,6 @@ export interface DateFieldSlots extends UseClearableFieldSlots {
      */
     textField?: React.ElementType;
 }
-export interface DateFieldSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
-    textField?: SlotComponentProps<typeof TextField, {}, DateFieldOwnerState<TDate, TEnableAccessibleFieldDOMStructure>>;
+export interface DateFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
+    textField?: SlotComponentProps<typeof TextField, {}, DateFieldOwnerState<TEnableAccessibleFieldDOMStructure>>;
 }

package/DateField/index.d.ts

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

package/DateField/useDateField.d.ts

@@ -1,3 +1,2 @@
 import { UseDateFieldProps } from './DateField.types';
-import { PickerValidDate } from '../models';
-export declare const useDateField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateFieldProps<TDate, TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseDateFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedDateFieldBaseProps<any>> & Required<Pick<UseDateFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedDateFieldBaseProps<any>>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "timezone" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "enableAccessibleFieldDOMStructure" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | keyof import("../internals").BaseDateValidationProps<any> | "dateSeparator">>;
+export declare const useDateField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateFieldProps<TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseDateFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedDateFieldBaseProps> & Required<Pick<UseDateFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedDateFieldBaseProps>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "formatDensity" | "enableAccessibleFieldDOMStructure" | "selectedSections" | "onSelectedSectionsChange" | "timezone" | "unstableFieldRef" | "referenceDate" | "shouldRespectLeadingZeros" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | keyof import("../internals").BaseDateValidationProps | "dateSeparator">>;