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

package/modern/locales/trTR.js

@@ -32,7 +32,7 @@ const trTRPickers = {
   timePickerToolbarTitle: 'Saat seç',
   dateRangePickerToolbarTitle: 'Tarih aralığı seçin',
   // Clock labels
-  clockLabelText: (view, time, utils, formattedTime) => `${timeViews[view]} seç.  ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Zaman seçilmedi' : `Seçilen zaman: ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, formattedTime) => `${timeViews[view]} seç.  ${!formattedTime ? 'Zaman seçilmedi' : `Seçilen zaman: ${formattedTime}`}`,
   hoursClockNumberText: hours => `${hours} saat`,
   minutesClockNumberText: minutes => `${minutes} dakika`,
   secondsClockNumberText: seconds => `${seconds} saniye`,
@@ -44,8 +44,8 @@ const trTRPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Hafta ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Tarih seçin, seçilen tarih: ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Tarih seç',
-  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Saat seçin, seçilen saat: ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Saat seç',
+  openDatePickerDialogue: formattedDate => formattedDate ? `Tarih seçin, seçilen tarih: ${formattedDate}` : 'Tarih seç',
+  openTimePickerDialogue: formattedTime => formattedTime ? `Saat seçin, seçilen saat: ${formattedTime}` : 'Saat seç',
   // fieldClearLabel: 'Clear',
 
   // Table labels

package/modern/locales/ukUA.js

@@ -31,7 +31,7 @@ const ukUAPickers = {
   timePickerToolbarTitle: 'Вибрати час',
   dateRangePickerToolbarTitle: 'Вибрати календарний період',
   // Clock labels
-  clockLabelText: (view, time, utils, formattedTime) => `Вибрати ${timeViews[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Час не вибраний' : `Вибрано час ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, formattedTime) => `Вибрати ${timeViews[view]}. ${!formattedTime ? 'Час не вибраний' : `Вибрано час ${formattedTime}`}`,
   hoursClockNumberText: hours => `${hours} годин`,
   minutesClockNumberText: minutes => `${minutes} хвилин`,
   secondsClockNumberText: seconds => `${seconds} секунд`,
@@ -43,8 +43,8 @@ const ukUAPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Тиждень ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Оберіть дату, обрана дата  ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Оберіть дату',
-  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Оберіть час, обраний час  ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Оберіть час',
+  openDatePickerDialogue: formattedDate => formattedDate ? `Оберіть дату, обрана дата  ${formattedDate}` : 'Оберіть дату',
+  openTimePickerDialogue: formattedTime => formattedTime ? `Оберіть час, обраний час  ${formattedTime}` : 'Оберіть час',
   fieldClearLabel: 'Очистити дані',
   // Table labels
   timeTableLabel: 'оберіть час',

package/modern/locales/urPK.js

@@ -32,7 +32,7 @@ const urPKPickers = {
   timePickerToolbarTitle: 'وقت منتخب کریں',
   dateRangePickerToolbarTitle: 'تاریخوں کی رینج منتخب کریں',
   // Clock labels
-  clockLabelText: (view, time, utils, formattedTime) => `${timeViews[view]} منتخب کریں ${!formattedTime && (time === null || !utils.isValid(time)) ? 'کوئی وقت منتخب نہیں' : `منتخب وقت ہے ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, formattedTime) => `${timeViews[view]} منتخب کریں ${!formattedTime ? 'کوئی وقت منتخب نہیں' : `منتخب وقت ہے ${formattedTime}`}`,
   hoursClockNumberText: hours => `${hours} گھنٹے`,
   minutesClockNumberText: minutes => `${minutes} منٹ`,
   secondsClockNumberText: seconds => `${seconds} سیکنڈ`,
@@ -44,8 +44,8 @@ const urPKPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `ہفتہ ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `تاریخ منتخب کریں، منتخب شدہ تاریخ ہے ${formattedDate ?? utils.format(value, 'fullDate')}` : 'تاریخ منتخب کریں',
-  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `وقت منتخب کریں، منتخب شدہ وقت ہے ${formattedTime ?? utils.format(value, 'fullTime')}` : 'وقت منتخب کریں',
+  openDatePickerDialogue: formattedDate => formattedDate ? `تاریخ منتخب کریں، منتخب شدہ تاریخ ہے ${formattedDate}` : 'تاریخ منتخب کریں',
+  openTimePickerDialogue: formattedTime => formattedTime ? `وقت منتخب کریں، منتخب شدہ وقت ہے ${formattedTime}` : 'وقت منتخب کریں',
   // fieldClearLabel: 'Clear',
 
   // Table labels

package/modern/locales/utils/getPickersLocalization.js

@@ -20,6 +20,6 @@ export const buildGetOpenDialogAriaText = params => {
   return value => {
     const formattedValue = value !== null && utils.isValid(value) ? utils.format(value, formatKey) : null;
     const translation = propsTranslation ?? contextTranslation;
-    return translation(value, utils, formattedValue);
+    return translation(formattedValue);
   };
 };

package/modern/locales/viVN.js

@@ -31,7 +31,7 @@ const viVNPickers = {
   timePickerToolbarTitle: 'Chọn giờ',
   dateRangePickerToolbarTitle: 'Chọn khoảng ngày',
   // Clock labels
-  clockLabelText: (view, time, utils, formattedTime) => `Chọn ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Không có giờ được chọn' : `Giờ được chọn là ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, formattedTime) => `Chọn ${views[view]}. ${!formattedTime ? 'Không có giờ được chọn' : `Giờ được chọn là ${formattedTime}`}`,
   hoursClockNumberText: hours => `${hours} giờ`,
   minutesClockNumberText: minutes => `${minutes} phút`,
   secondsClockNumberText: seconds => `${seconds} giây`,
@@ -43,8 +43,8 @@ const viVNPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Tuần ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Chọn ngày, ngày đã chọn là ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Chọn ngày',
-  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Chọn giờ, giờ đã chọn là ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Chọn giờ',
+  openDatePickerDialogue: formattedDate => formattedDate ? `Chọn ngày, ngày đã chọn là ${formattedDate}` : 'Chọn ngày',
+  openTimePickerDialogue: formattedTime => formattedTime ? `Chọn giờ, giờ đã chọn là ${formattedTime}` : 'Chọn giờ',
   fieldClearLabel: 'Xóa giá trị',
   // Table labels
   timeTableLabel: 'chọn giờ',

package/modern/locales/zhCN.js

@@ -31,7 +31,7 @@ const zhCNPickers = {
   timePickerToolbarTitle: '选择时间',
   dateRangePickerToolbarTitle: '选择时间范围',
   // Clock labels
-  clockLabelText: (view, time, utils, formattedTime) => `选择 ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? '未选择时间' : `已选择${formattedTime ?? utils.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, formattedTime) => `选择 ${views[view]}. ${!formattedTime ? '未选择时间' : `已选择${formattedTime}`}`,
   hoursClockNumberText: hours => `${hours}小时`,
   minutesClockNumberText: minutes => `${minutes}分钟`,
   secondsClockNumberText: seconds => `${seconds}秒`,
@@ -43,8 +43,8 @@ const zhCNPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `第${weekNumber}周`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `选择日期，已选择${formattedDate ?? utils.format(value, 'fullDate')}` : '选择日期',
-  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `选择时间，已选择${formattedTime ?? utils.format(value, 'fullTime')}` : '选择时间',
+  openDatePickerDialogue: formattedDate => formattedDate ? `选择日期，已选择${formattedDate}` : '选择日期',
+  openTimePickerDialogue: formattedTime => formattedTime ? `选择时间，已选择${formattedTime}` : '选择时间',
   fieldClearLabel: '清除',
   // Table labels
   timeTableLabel: '选择时间',

package/modern/locales/zhHK.js

@@ -31,7 +31,7 @@ const zhHKPickers = {
   timePickerToolbarTitle: '選擇時間',
   dateRangePickerToolbarTitle: '選擇時間範圍',
   // Clock labels
-  clockLabelText: (view, time, utils, formattedTime) => `選擇 ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? '未選擇時間' : `已選擇${formattedTime ?? utils.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, formattedTime) => `選擇 ${views[view]}. ${!formattedTime ? '未選擇時間' : `已選擇${formattedTime}`}`,
   hoursClockNumberText: hours => `${hours}小時`,
   minutesClockNumberText: minutes => `${minutes}分鐘`,
   secondsClockNumberText: seconds => `${seconds}秒`,
@@ -43,8 +43,8 @@ const zhHKPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `第${weekNumber}週`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `選擇日期，已選擇${formattedDate ?? utils.format(value, 'fullDate')}` : '選擇日期',
-  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `選擇時間，已選擇${formattedTime ?? utils.format(value, 'fullTime')}` : '選擇時間',
+  openDatePickerDialogue: formattedDate => formattedDate ? `選擇日期，已選擇${formattedDate}` : '選擇日期',
+  openTimePickerDialogue: formattedTime => formattedTime ? `選擇時間，已選擇${formattedTime}` : '選擇時間',
   fieldClearLabel: '清除',
   // Table labels
   timeTableLabel: '選擇時間',

package/modern/validation/useValidation.js

@@ -5,13 +5,12 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { useLocalizationContext } from "../internals/hooks/useUtils.js";
 /**
  * Utility hook to check if a given value is valid based on the provided validation props.
- * @template TDate
  * @template TValue The value type. It will be either the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
  * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
- * @param {UseValidationOptions<TValue, TDate, TError, TValidationProps>} options The options to configure the hook.
+ * @param {UseValidationOptions<TValue, TError, TValidationProps>} options The options to configure the hook.
  * @param {TValue} options.value The value to validate.
  * @param {PickersTimezone} options.timezone The timezone to use for the validation.
- * @param {Validator<TValue, TDate, TError, TValidationProps>} options.validator The validator function to use.
+ * @param {Validator<TValue, TError, TValidationProps>} options.validator The validator function to use.
  * @param {TValidationProps} options.props The validation props, they differ depending on the component.
  * @param {(error: TError, value: TValue) => void} options.onError Callback fired when the error associated with the current value changes.
  */

package/modern/validation/validateDate.js

@@ -1,5 +1,10 @@
 import { applyDefaultDate } from "../internals/utils/date-utils.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
+
+/**
+ * Validation props used by the Date Picker, Date Field and Date Calendar components.
+ */
+
 export const validateDate = ({
   props,
   value,

package/modern/validation/validateDateTime.js

@@ -1,6 +1,11 @@
 import { validateDate } from "./validateDate.js";
 import { validateTime } from "./validateTime.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
+
+/**
+ * Validation props used by the Date Time Picker and Date Time Field components.
+ */
+
 export const validateDateTime = ({
   adapter,
   value,

package/modern/validation/validateTime.js

@@ -1,5 +1,10 @@
 import { createIsAfterIgnoreDatePart } from "../internals/utils/time-utils.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
+
+/**
+ * Validation props used by the Time Picker, Time Field and Clock components.
+ */
+
 export const validateTime = ({
   adapter,
   value,

package/node/DateCalendar/DateCalendar.js

@@ -30,12 +30,10 @@ var _dateCalendarClasses = require("./dateCalendarClasses");
 var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _dimensions = require("../internals/constants/dimensions");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "referenceDate", "disableFuture", "disablePast", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsOrder", "yearsPerRow", "monthsPerRow", "timezone"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "referenceDate", "disableFuture", "disablePast", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "classes", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsOrder", "yearsPerRow", "monthsPerRow", "timezone"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     viewTransitionContainer: ['viewTransitionContainer']
@@ -91,6 +89,9 @@ const DateCalendarViewTransitionContainer = (0, _styles.styled)(_PickersFadeTran
  */
 const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps, ref) {
   const utils = (0, _useUtils.useUtils)();
+  const {
+    ownerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const id = (0, _utils.unstable_useId)();
   const props = useDateCalendarDefaultizedProps(inProps, 'MuiDateCalendar');
   const {
@@ -112,6 +113,7 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
       views,
       openTo,
       className,
+      classes: classesProp,
       disabled,
       readOnly,
       minDate,
@@ -210,7 +212,7 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
       timezone,
       labelId: gridLabelId
     },
-    ownerState: props
+    ownerState
   });
   const handleDateMonthChange = (0, _utils.unstable_useEventCallback)(newDate => {
     const startOfMonth = utils.startOfMonth(newDate);
@@ -269,8 +271,7 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
     }
   }, [value]); // eslint-disable-line
 
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
   const baseDateValidationProps = {
     disablePast,
     disableFuture,
@@ -372,9 +373,9 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   className: _propTypes.default.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.default.func,
   /**
@@ -383,7 +384,8 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    */
   defaultValue: _propTypes.default.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.default.bool,
@@ -454,8 +456,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   onFocusedViewChange: _propTypes.default.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: _propTypes.default.func,
   /**
@@ -466,8 +467,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   onViewChange: _propTypes.default.func,
   /**
    * Callback fired on year change.
-   * @template TDate
-   * @param {TDate} year The new year.
+   * @param {PickerValidDate} year The new year.
    */
   onYearChange: _propTypes.default.func,
   /**
@@ -477,7 +477,8 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    */
   openTo: _propTypes.default.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.default.bool,
@@ -502,22 +503,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.default.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.default.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.default.func,

package/node/DateCalendar/DayCalendar.js

@@ -17,20 +17,18 @@ var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _PickersDay = require("../PickersDay/PickersDay");
-var _usePickersTranslations = require("../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _dimensions = require("../internals/constants/dimensions");
 var _PickersSlideTransition = require("./PickersSlideTransition");
 var _useIsDateDisabled = require("./useIsDateDisabled");
 var _dateUtils = require("../internals/utils/date-utils");
 var _dayCalendarClasses = require("./dayCalendarClasses");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["parentProps", "day", "focusableDay", "selectedDays", "isDateDisabled", "currentMonthNumber", "isViewFocused"],
   _excluded2 = ["ownerState"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     header: ['header'],
@@ -163,9 +161,13 @@ function WrappedDay(_ref) {
   } = parentProps;
   const utils = (0, _useUtils.useUtils)();
   const now = (0, _useUtils.useNow)(timezone);
+  const {
+    ownerState
+  } = (0, _usePickerPrivateContext.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.PickersDay;
   // We don't want to pass to ownerState down, to avoid re-rendering all the day whenever a prop changes.
   const _useSlotProps = (0, _useSlotProps2.default)({
@@ -179,13 +181,13 @@ function WrappedDay(_ref) {
         // it is used in date range dragging logic by accessing `dataset.timestamp`
         'data-timestamp': utils.toJsDate(day).valueOf()
       }, other),
-      ownerState: (0, _extends2.default)({}, parentProps, {
+      ownerState: (0, _extends2.default)({}, ownerState, {
         day,
-        selected: isSelected
+        isDayDisabled: isDisabled,
+        isDaySelected: isSelected
       })
     }),
     dayProps = (0, _objectWithoutPropertiesLoose2.default)(_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));
@@ -228,6 +230,7 @@ function DayCalendar(inProps) {
   const {
     onFocusedDayChange,
     className,
+    classes: classesProp,
     currentMonth,
     selectedDays,
     focusedDay,
@@ -258,7 +261,7 @@ function DayCalendar(inProps) {
     timezone
   } = props;
   const now = (0, _useUtils.useNow)(timezone);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   const isRtl = (0, _RtlProvider.useRtl)();
   const isDateDisabled = (0, _useIsDateDisabled.useIsDateDisabled)({
     shouldDisableDate,
@@ -270,7 +273,7 @@ function DayCalendar(inProps) {
     disableFuture,
     timezone
   });
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const [internalHasFocus, setInternalHasFocus] = (0, _utils.unstable_useControlled)({
     name: 'DayCalendar',
     state: 'hasFocus',

package/node/DateField/DateField.js

@@ -44,7 +44,7 @@ const DateField = exports.DateField = /*#__PURE__*/React.forwardRef(function Dat
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
   const ownerState = themeProps;
-  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? _PickersTextField.PickersTextField : _TextField.default);
+  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
   const textFieldProps = (0, _useSlotProps.default)({
     elementType: TextField,
     externalSlotProps: slotProps?.textField,
@@ -96,6 +96,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
   defaultValue: _propTypes.default.object,
   /**
    * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: _propTypes.default.bool,
@@ -110,7 +111,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   disablePast: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.bool,
   /**
@@ -225,8 +226,8 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   onSelectedSectionsChange: _propTypes.default.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.default.bool,
@@ -256,22 +257,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.default.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.default.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.default.func,

package/node/DatePicker/DatePicker.js

@@ -72,9 +72,9 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   closeOnSelect: _propTypes.default.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.default.func,
   /**
@@ -89,7 +89,8 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   desktopModeMediaQuery: _propTypes.default.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.default.bool,
@@ -118,7 +119,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   displayWeekNumber: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.any,
   /**
@@ -208,8 +209,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   onError: _propTypes.default.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: _propTypes.default.func,
   /**
@@ -230,8 +230,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   onViewChange: _propTypes.default.func,
   /**
    * Callback fired on year change.
-   * @template TDate
-   * @param {TDate} year The new year.
+   * @param {PickerValidDate} year The new year.
    */
   onYearChange: _propTypes.default.func,
   /**
@@ -249,6 +248,11 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: _propTypes.default.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.default.bool,
   /**
    * If `true`, disable heavy animations.
@@ -281,22 +285,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.default.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.default.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.default.func,

package/node/DatePicker/DatePickerToolbar.js

@@ -16,7 +16,7 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _PickersToolbar = require("../internals/components/PickersToolbar");
-var _usePickersTranslations = require("../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _datePickerToolbarClasses = require("./datePickerToolbarClasses");
 var _dateUtils = require("../internals/utils/date-utils");
@@ -76,7 +76,7 @@ const DatePickerToolbar = exports.DatePickerToolbar = /*#__PURE__*/React.forward
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const utils = (0, _useUtils.useUtils)();
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const classes = useUtilityClasses(props);
   const dateText = React.useMemo(() => {
     if (!value) {
@@ -114,6 +114,11 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
   disabled: _propTypes.default.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
@@ -128,6 +133,11 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: _propTypes.default.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.default.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.