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

package/models/fields.d.ts

@@ -1,12 +1,10 @@
 import * as React from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
-import { SxProps } from '@mui/material/styles';
-import type { BaseFieldProps } from '../internals/models/fields';
-import type { ExportedUseClearableFieldProps, UseClearableFieldResponse, UseClearableFieldSlotProps, UseClearableFieldSlots } from '../hooks/useClearableField';
-import { ExportedPickersSectionListProps, PickersSectionListRef } from '../PickersSectionList';
-import type { UseFieldResponse } from '../internals/hooks/useField';
+import type { ExportedUseClearableFieldProps, UseClearableFieldResponse } from '../hooks/useClearableField';
+import { ExportedPickersSectionListProps } from '../PickersSectionList';
+import type { UseFieldInternalProps, UseFieldResponse } from '../internals/hooks/useField';
 import type { PickersTextFieldProps } from '../PickersTextField';
-import { PickerValidDate } from './pickers';
+import { BaseForwardedSingleInputFieldProps } from '../internals/models';
 export type FieldSectionType = 'year' | 'month' | 'day' | 'weekDay' | 'hours' | 'minutes' | 'seconds' | 'meridiem' | 'empty';
 export type FieldSectionContentType = 'digit' | 'digit-with-letter' | 'letter';
 export type FieldValueType = 'date' | 'time' | 'date-time';
@@ -101,48 +99,18 @@ export interface FieldRef<TSection extends FieldSection> {
     isFieldFocused: () => boolean;
 }
 export type FieldSelectedSections = number | FieldSectionType | null | 'all';
-interface BaseForwardedCommonSingleInputFieldProps extends ExportedUseClearableFieldProps {
-    ref?: React.Ref<HTMLDivElement>;
-    sx?: SxProps<any>;
-    label?: React.ReactNode;
-    id?: string;
-    name?: string;
-    onKeyDown?: React.KeyboardEventHandler;
-    onBlur?: React.FocusEventHandler;
-    focused?: boolean;
-    InputProps?: {
-        ref?: React.Ref<any>;
-        endAdornment?: React.ReactNode;
-        startAdornment?: React.ReactNode;
-    };
-    inputProps?: {
-        'aria-label'?: string;
-    };
-    slots?: UseClearableFieldSlots;
-    slotProps?: UseClearableFieldSlotProps & {
-        textField?: {};
-    };
-}
-interface BaseForwardedV6SingleInputFieldProps {
-    inputRef?: React.Ref<HTMLInputElement>;
-}
-interface BaseForwardedV7SingleInputFieldProps {
-    sectionListRef?: React.Ref<PickersSectionListRef>;
-}
-type BaseForwardedSingleInputFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = BaseForwardedCommonSingleInputFieldProps & (TEnableAccessibleFieldDOMStructure extends false ? BaseForwardedV6SingleInputFieldProps : BaseForwardedV7SingleInputFieldProps);
 /**
- * Props the single input field can receive when used inside a picker.
- * Only contains what the MUI components are passing to the field,
- * not what users can pass using the `props.slotProps.field`.
+ * Props the prop `slotProps.field` of a picker can receive.
  */
-export type BaseSingleInputFieldProps<TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError> = BaseFieldProps<TValue, TDate, TSection, TEnableAccessibleFieldDOMStructure, TError> & BaseForwardedSingleInputFieldProps<TEnableAccessibleFieldDOMStructure>;
+export type PickerFieldSlotProps<TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean> = ExportedUseClearableFieldProps & Pick<UseFieldInternalProps<TValue, TSection, TEnableAccessibleFieldDOMStructure, unknown>, 'shouldRespectLeadingZeros' | 'readOnly'> & React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
 /**
  * Props the text field receives when used with a single input picker.
  * Only contains what the MUI components are passing to the text field, not what users can pass using the `props.slotProps.field` and `props.slotProps.textField`.
  */
-export type BaseSingleInputPickersTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = UseClearableFieldResponse<UseFieldResponse<TEnableAccessibleFieldDOMStructure, BaseForwardedSingleInputFieldProps<TEnableAccessibleFieldDOMStructure>>>;
+export type BaseSingleInputPickersTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = UseClearableFieldResponse<UseFieldResponse<TEnableAccessibleFieldDOMStructure, BaseForwardedSingleInputFieldProps>>;
 /**
  * Props the built-in text field component can receive.
  */
 export type BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = TEnableAccessibleFieldDOMStructure extends false ? Omit<TextFieldProps, 'autoComplete' | 'error' | 'maxRows' | 'minRows' | 'multiline' | 'placeholder' | 'rows' | 'select' | 'SelectProps' | 'type'> : Partial<Omit<PickersTextFieldProps, keyof ExportedPickersSectionListProps>>;
-export {};

package/models/pickers.d.ts

@@ -10,21 +10,25 @@ export interface PickerChangeHandlerContext<TError> {
 export interface PickerValidDateLookup {
 }
 export type PickerValidDate = keyof PickerValidDateLookup extends never ? any : PickerValidDateLookup[keyof PickerValidDateLookup];
-export interface PickerOwnerState<TValue> {
+export interface PickerOwnerState {
     /**
-     * The value currently displayed in the field and in the view.
+     * `true` if the value of the picker is currently empty.
+     * Is always `false` if the component you are accessing the ownerState from is not wrapped by a picker.
      */
-    value: TValue;
+    isPickerValueEmpty: boolean;
     /**
      * `true` if the picker is open, `false` otherwise.
+     * Is always `false` if the component you are accessing the ownerState from is not wrapped by a picker.
      */
-    open: boolean;
+    isPickerOpen: boolean;
     /**
      * `true` if the picker is disabled, `false` otherwise.
+     * Is always `false` if the component you are accessing the ownerState from is not wrapped by a picker.
      */
-    disabled: boolean;
+    isPickerDisabled: boolean;
     /**
      * `true` if the picker is read-only, `false` otherwise.
+     * Is always `false` if the component you are accessing the ownerState from is not wrapped by a picker.
      */
-    readOnly: boolean;
+    isPickerReadOnly: boolean;
 }

package/modern/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,
@@ -203,7 +205,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 +264,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 +366,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 +377,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 +449,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 +460,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 +470,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 +496,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/modern/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/modern/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/modern/DatePicker/DatePicker.js

@@ -65,9 +65,9 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   closeOnSelect: PropTypes.bool,
   /**
    * 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,
   /**
@@ -82,7 +82,8 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   desktopModeMediaQuery: PropTypes.string,
   /**
-   * 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,
@@ -111,7 +112,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
@@ -201,8 +202,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   onError: PropTypes.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: PropTypes.func,
   /**
@@ -223,8 +223,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.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,
   /**
@@ -242,6 +241,11 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
+  /**
+   * 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,
   /**
    * If `true`, disable heavy animations.
@@ -274,22 +278,19 @@ process.env.NODE_ENV !== "production" ? DatePicker.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/modern/DatePicker/DatePickerToolbar.js

@@ -10,7 +10,7 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { PickersToolbar } from "../internals/components/PickersToolbar.js";
-import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { getDatePickerToolbarUtilityClass } from "./datePickerToolbarClasses.js";
 import { resolveDateFormat } from "../internals/utils/date-utils.js";
@@ -69,7 +69,7 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const classes = useUtilityClasses(props);
   const dateText = React.useMemo(() => {
     if (!value) {
@@ -107,6 +107,11 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
   disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
@@ -121,6 +126,11 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: PropTypes.func.isRequired,
+  /**
+   * 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,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.

package/modern/DateTimeField/DateTimeField.js

@@ -37,7 +37,7 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
     } = 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,
@@ -94,6 +94,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.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,
@@ -113,7 +114,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    */
   disablePast: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.bool,
   /**
@@ -251,8 +252,8 @@ process.env.NODE_ENV !== "production" ? DateTimeField.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,
@@ -282,30 +283,26 @@ process.env.NODE_ENV !== "production" ? DateTimeField.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 time.
-   * @template TDate
-   * @param {TDate} value The value to check.
+   * @param {PickerValidDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */
   shouldDisableTime: 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,