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

package/modern/AdapterDateFnsJalali/AdapterDateFnsJalali.js

@@ -1,50 +1,48 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 /* eslint-disable class-methods-use-this */
-import addSeconds from 'date-fns-jalali/addSeconds';
-import addMinutes from 'date-fns-jalali/addMinutes';
-import addHours from 'date-fns-jalali/addHours';
-import addDays from 'date-fns-jalali/addDays';
-import addWeeks from 'date-fns-jalali/addWeeks';
-import addMonths from 'date-fns-jalali/addMonths';
-import addYears from 'date-fns-jalali/addYears';
-import endOfDay from 'date-fns-jalali/endOfDay';
-import endOfWeek from 'date-fns-jalali/endOfWeek';
-import endOfYear from 'date-fns-jalali/endOfYear';
-import dateFnsFormat from 'date-fns-jalali/format';
-import getHours from 'date-fns-jalali/getHours';
-import getSeconds from 'date-fns-jalali/getSeconds';
-import getMilliseconds from 'date-fns-jalali/getMilliseconds';
-import getWeek from 'date-fns-jalali/getWeek';
-import getYear from 'date-fns-jalali/getYear';
-import getMonth from 'date-fns-jalali/getMonth';
-import getDate from 'date-fns-jalali/getDate';
-import getDaysInMonth from 'date-fns-jalali/getDaysInMonth';
-import getMinutes from 'date-fns-jalali/getMinutes';
-import isAfter from 'date-fns-jalali/isAfter';
-import isBefore from 'date-fns-jalali/isBefore';
-import isEqual from 'date-fns-jalali/isEqual';
-import isSameDay from 'date-fns-jalali/isSameDay';
-import isSameYear from 'date-fns-jalali/isSameYear';
-import isSameMonth from 'date-fns-jalali/isSameMonth';
-import isSameHour from 'date-fns-jalali/isSameHour';
-import isValid from 'date-fns-jalali/isValid';
-import dateFnsParse from 'date-fns-jalali/parse';
-import setDate from 'date-fns-jalali/setDate';
-import setHours from 'date-fns-jalali/setHours';
-import setMinutes from 'date-fns-jalali/setMinutes';
-import setMonth from 'date-fns-jalali/setMonth';
-import setSeconds from 'date-fns-jalali/setSeconds';
-import setMilliseconds from 'date-fns-jalali/setMilliseconds';
-import setYear from 'date-fns-jalali/setYear';
-import startOfDay from 'date-fns-jalali/startOfDay';
-import startOfMonth from 'date-fns-jalali/startOfMonth';
-import endOfMonth from 'date-fns-jalali/endOfMonth';
-import startOfWeek from 'date-fns-jalali/startOfWeek';
-import startOfYear from 'date-fns-jalali/startOfYear';
-import isWithinInterval from 'date-fns-jalali/isWithinInterval';
-import defaultLocale from 'date-fns-jalali/locale/fa-IR';
-// @ts-ignore
-import longFormatters from 'date-fns-jalali/_lib/format/longFormatters';
+import { addSeconds } from 'date-fns-jalali/addSeconds';
+import { addMinutes } from 'date-fns-jalali/addMinutes';
+import { addHours } from 'date-fns-jalali/addHours';
+import { addDays } from 'date-fns-jalali/addDays';
+import { addWeeks } from 'date-fns-jalali/addWeeks';
+import { addMonths } from 'date-fns-jalali/addMonths';
+import { addYears } from 'date-fns-jalali/addYears';
+import { endOfDay } from 'date-fns-jalali/endOfDay';
+import { endOfWeek } from 'date-fns-jalali/endOfWeek';
+import { endOfYear } from 'date-fns-jalali/endOfYear';
+import { format as dateFnsFormat, longFormatters } from 'date-fns-jalali/format';
+import { getHours } from 'date-fns-jalali/getHours';
+import { getSeconds } from 'date-fns-jalali/getSeconds';
+import { getMilliseconds } from 'date-fns-jalali/getMilliseconds';
+import { getWeek } from 'date-fns-jalali/getWeek';
+import { getYear } from 'date-fns-jalali/getYear';
+import { getMonth } from 'date-fns-jalali/getMonth';
+import { getDate } from 'date-fns-jalali/getDate';
+import { getDaysInMonth } from 'date-fns-jalali/getDaysInMonth';
+import { getMinutes } from 'date-fns-jalali/getMinutes';
+import { isAfter } from 'date-fns-jalali/isAfter';
+import { isBefore } from 'date-fns-jalali/isBefore';
+import { isEqual } from 'date-fns-jalali/isEqual';
+import { isSameDay } from 'date-fns-jalali/isSameDay';
+import { isSameYear } from 'date-fns-jalali/isSameYear';
+import { isSameMonth } from 'date-fns-jalali/isSameMonth';
+import { isSameHour } from 'date-fns-jalali/isSameHour';
+import { isValid } from 'date-fns-jalali/isValid';
+import { parse as dateFnsParse } from 'date-fns-jalali/parse';
+import { setDate } from 'date-fns-jalali/setDate';
+import { setHours } from 'date-fns-jalali/setHours';
+import { setMinutes } from 'date-fns-jalali/setMinutes';
+import { setMonth } from 'date-fns-jalali/setMonth';
+import { setSeconds } from 'date-fns-jalali/setSeconds';
+import { setMilliseconds } from 'date-fns-jalali/setMilliseconds';
+import { setYear } from 'date-fns-jalali/setYear';
+import { startOfDay } from 'date-fns-jalali/startOfDay';
+import { startOfMonth } from 'date-fns-jalali/startOfMonth';
+import { endOfMonth } from 'date-fns-jalali/endOfMonth';
+import { startOfWeek } from 'date-fns-jalali/startOfWeek';
+import { startOfYear } from 'date-fns-jalali/startOfYear';
+import { isWithinInterval } from 'date-fns-jalali/isWithinInterval';
+import { faIR as defaultLocale } from 'date-fns-jalali/locale/fa-IR';
 import { AdapterDateFnsBase } from "../AdapterDateFnsBase/index.js";
 const defaultFormats = {
   year: 'yyyy',
@@ -116,7 +114,10 @@ export class AdapterDateFnsJalali extends AdapterDateFnsBase {
     /* istanbul ignore next */
     if (process.env.NODE_ENV !== 'production') {
       if (typeof addDays !== 'function') {
-        throw new Error(['MUI: The `date-fns-jalali` package v3.x is not compatible with this adapter.', 'Please, install v2.x of the package or use the `AdapterDateFnsJalaliV3` instead.'].join('\n'));
+        throw new Error(['MUI: The `date-fns-jalali` package v2.x is not compatible with this adapter.', 'Please, install v3.x or v4.x of the package or use the `AdapterDateFnsJalaliV2` instead.'].join('\n'));
+      }
+      if (!longFormatters) {
+        throw new Error('MUI: The minimum supported `date-fns-jalali` package version compatible with this adapter is `3.2.x`.');
       }
     }
     super({
@@ -127,6 +128,7 @@ export class AdapterDateFnsJalali extends AdapterDateFnsBase {
       longFormatters,
       lib: 'date-fns-jalali'
     });
+    // TODO: explicit return types can be removed once there is only one date-fns version supported
     this.parse = (value, format) => {
       if (value === '') {
         return null;

package/modern/{AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.js → AdapterDateFnsJalaliV2/AdapterDateFnsJalaliV2.js}

@@ -1,53 +1,50 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 /* eslint-disable class-methods-use-this */
-// TODO remove when date-fns-jalali-v3 is the default
 // @ts-nocheck
-import { addSeconds } from 'date-fns-jalali/addSeconds';
-import { addMinutes } from 'date-fns-jalali/addMinutes';
-import { addHours } from 'date-fns-jalali/addHours';
-import { addDays } from 'date-fns-jalali/addDays';
-import { addWeeks } from 'date-fns-jalali/addWeeks';
-import { addMonths } from 'date-fns-jalali/addMonths';
-import { addYears } from 'date-fns-jalali/addYears';
-import { endOfDay } from 'date-fns-jalali/endOfDay';
-import { endOfWeek } from 'date-fns-jalali/endOfWeek';
-import { endOfYear } from 'date-fns-jalali/endOfYear';
-import { format as dateFnsFormat, longFormatters } from 'date-fns-jalali/format';
-import { getHours } from 'date-fns-jalali/getHours';
-import { getSeconds } from 'date-fns-jalali/getSeconds';
-import { getMilliseconds } from 'date-fns-jalali/getMilliseconds';
-import { getWeek } from 'date-fns-jalali/getWeek';
-import { getYear } from 'date-fns-jalali/getYear';
-import { getMonth } from 'date-fns-jalali/getMonth';
-import { getDate } from 'date-fns-jalali/getDate';
-import { getDaysInMonth } from 'date-fns-jalali/getDaysInMonth';
-import { getMinutes } from 'date-fns-jalali/getMinutes';
-import { isAfter } from 'date-fns-jalali/isAfter';
-import { isBefore } from 'date-fns-jalali/isBefore';
-import { isEqual } from 'date-fns-jalali/isEqual';
-import { isSameDay } from 'date-fns-jalali/isSameDay';
-import { isSameYear } from 'date-fns-jalali/isSameYear';
-import { isSameMonth } from 'date-fns-jalali/isSameMonth';
-import { isSameHour } from 'date-fns-jalali/isSameHour';
-import { isValid } from 'date-fns-jalali/isValid';
-import { parse as dateFnsParse } from 'date-fns-jalali/parse';
-import { setDate } from 'date-fns-jalali/setDate';
-import { setHours } from 'date-fns-jalali/setHours';
-import { setMinutes } from 'date-fns-jalali/setMinutes';
-import { setMonth } from 'date-fns-jalali/setMonth';
-import { setSeconds } from 'date-fns-jalali/setSeconds';
-import { setMilliseconds } from 'date-fns-jalali/setMilliseconds';
-import { setYear } from 'date-fns-jalali/setYear';
-import { startOfDay } from 'date-fns-jalali/startOfDay';
-import { startOfMonth } from 'date-fns-jalali/startOfMonth';
-import { endOfMonth } from 'date-fns-jalali/endOfMonth';
-import { startOfWeek } from 'date-fns-jalali/startOfWeek';
-import { startOfYear } from 'date-fns-jalali/startOfYear';
-import { isWithinInterval } from 'date-fns-jalali/isWithinInterval';
-import { faIR as defaultLocale } from 'date-fns-jalali/locale/fa-IR';
-// date-fns-jalali v2 does not export types
-// @ts-ignore TODO remove when date-fns-jalali-v3 is the default
-
+import addSeconds from 'date-fns-jalali/addSeconds';
+import addMinutes from 'date-fns-jalali/addMinutes';
+import addHours from 'date-fns-jalali/addHours';
+import addDays from 'date-fns-jalali/addDays';
+import addWeeks from 'date-fns-jalali/addWeeks';
+import addMonths from 'date-fns-jalali/addMonths';
+import addYears from 'date-fns-jalali/addYears';
+import endOfDay from 'date-fns-jalali/endOfDay';
+import endOfWeek from 'date-fns-jalali/endOfWeek';
+import endOfYear from 'date-fns-jalali/endOfYear';
+import dateFnsFormat from 'date-fns-jalali/format';
+import getHours from 'date-fns-jalali/getHours';
+import getSeconds from 'date-fns-jalali/getSeconds';
+import getMilliseconds from 'date-fns-jalali/getMilliseconds';
+import getWeek from 'date-fns-jalali/getWeek';
+import getYear from 'date-fns-jalali/getYear';
+import getMonth from 'date-fns-jalali/getMonth';
+import getDate from 'date-fns-jalali/getDate';
+import getDaysInMonth from 'date-fns-jalali/getDaysInMonth';
+import getMinutes from 'date-fns-jalali/getMinutes';
+import isAfter from 'date-fns-jalali/isAfter';
+import isBefore from 'date-fns-jalali/isBefore';
+import isEqual from 'date-fns-jalali/isEqual';
+import isSameDay from 'date-fns-jalali/isSameDay';
+import isSameYear from 'date-fns-jalali/isSameYear';
+import isSameMonth from 'date-fns-jalali/isSameMonth';
+import isSameHour from 'date-fns-jalali/isSameHour';
+import isValid from 'date-fns-jalali/isValid';
+import dateFnsParse from 'date-fns-jalali/parse';
+import setDate from 'date-fns-jalali/setDate';
+import setHours from 'date-fns-jalali/setHours';
+import setMinutes from 'date-fns-jalali/setMinutes';
+import setMonth from 'date-fns-jalali/setMonth';
+import setSeconds from 'date-fns-jalali/setSeconds';
+import setMilliseconds from 'date-fns-jalali/setMilliseconds';
+import setYear from 'date-fns-jalali/setYear';
+import startOfDay from 'date-fns-jalali/startOfDay';
+import startOfMonth from 'date-fns-jalali/startOfMonth';
+import endOfMonth from 'date-fns-jalali/endOfMonth';
+import startOfWeek from 'date-fns-jalali/startOfWeek';
+import startOfYear from 'date-fns-jalali/startOfYear';
+import isWithinInterval from 'date-fns-jalali/isWithinInterval';
+import defaultLocale from 'date-fns-jalali/locale/fa-IR';
+import longFormatters from 'date-fns-jalali/_lib/format/longFormatters';
 import { AdapterDateFnsBase } from "../AdapterDateFnsBase/index.js";
 const defaultFormats = {
   year: 'yyyy',
@@ -119,10 +116,7 @@ export class AdapterDateFnsJalali extends AdapterDateFnsBase {
     /* istanbul ignore next */
     if (process.env.NODE_ENV !== 'production') {
       if (typeof addDays !== 'function') {
-        throw new Error([`MUI: The \`date-fns-jalali\` package v2.x is not compatible with this adapter.`, 'Please, install v3.x of the package or use the `AdapterDateFnsJalali` instead.'].join('\n'));
-      }
-      if (!longFormatters) {
-        throw new Error('MUI: The minimum supported `date-fns-jalali` package version compatible with this adapter is `3.2.x`.');
+        throw new Error(['MUI: This adapter is only compatible with `date-fns-jalali` v2.x package versions.', 'Please, install v2.x of the package or use the `AdapterDateFnsJalali` instead.'].join('\n'));
       }
     }
     super({
@@ -133,7 +127,6 @@ export class AdapterDateFnsJalali extends AdapterDateFnsBase {
       longFormatters,
       lib: 'date-fns-jalali'
     });
-    // TODO: explicit return types can be removed once there is only one date-fns version supported
     this.parse = (value, format) => {
       if (value === '') {
         return null;

package/modern/AdapterDateFnsJalaliV2/index.js

@@ -0,0 +1 @@
+export { AdapterDateFnsJalali } from "./AdapterDateFnsJalaliV2.js";

package/modern/{AdapterDateFnsV3/AdapterDateFnsV3.js → AdapterDateFnsV2/AdapterDateFnsV2.js}

@@ -1,53 +1,49 @@
 /* eslint-disable class-methods-use-this */
-// TODO remove when date-fns-v3 is the default
 // @ts-nocheck
-import { addDays } from 'date-fns/addDays';
-import { addSeconds } from 'date-fns/addSeconds';
-import { addMinutes } from 'date-fns/addMinutes';
-import { addHours } from 'date-fns/addHours';
-import { addWeeks } from 'date-fns/addWeeks';
-import { addMonths } from 'date-fns/addMonths';
-import { addYears } from 'date-fns/addYears';
-import { endOfDay } from 'date-fns/endOfDay';
-import { endOfWeek } from 'date-fns/endOfWeek';
-import { endOfYear } from 'date-fns/endOfYear';
-// @ts-ignore TODO remove when date-fns-v3 is the default
-import { format as dateFnsFormat, longFormatters } from 'date-fns/format';
-import { getDate } from 'date-fns/getDate';
-import { getDaysInMonth } from 'date-fns/getDaysInMonth';
-import { getHours } from 'date-fns/getHours';
-import { getMinutes } from 'date-fns/getMinutes';
-import { getMonth } from 'date-fns/getMonth';
-import { getSeconds } from 'date-fns/getSeconds';
-import { getMilliseconds } from 'date-fns/getMilliseconds';
-import { getWeek } from 'date-fns/getWeek';
-import { getYear } from 'date-fns/getYear';
-import { isAfter } from 'date-fns/isAfter';
-import { isBefore } from 'date-fns/isBefore';
-import { isEqual } from 'date-fns/isEqual';
-import { isSameDay } from 'date-fns/isSameDay';
-import { isSameYear } from 'date-fns/isSameYear';
-import { isSameMonth } from 'date-fns/isSameMonth';
-import { isSameHour } from 'date-fns/isSameHour';
-import { isValid } from 'date-fns/isValid';
-import { parse as dateFnsParse } from 'date-fns/parse';
-import { setDate } from 'date-fns/setDate';
-import { setHours } from 'date-fns/setHours';
-import { setMinutes } from 'date-fns/setMinutes';
-import { setMonth } from 'date-fns/setMonth';
-import { setSeconds } from 'date-fns/setSeconds';
-import { setMilliseconds } from 'date-fns/setMilliseconds';
-import { setYear } from 'date-fns/setYear';
-import { startOfDay } from 'date-fns/startOfDay';
-import { startOfMonth } from 'date-fns/startOfMonth';
-import { endOfMonth } from 'date-fns/endOfMonth';
-import { startOfWeek } from 'date-fns/startOfWeek';
-import { startOfYear } from 'date-fns/startOfYear';
-import { isWithinInterval } from 'date-fns/isWithinInterval';
-import { enUS } from 'date-fns/locale/en-US';
-// date-fns v2 does not export types
-// @ts-ignore TODO remove when date-fns-v3 is the default
-
+import addDays from 'date-fns/addDays';
+import addSeconds from 'date-fns/addSeconds';
+import addMinutes from 'date-fns/addMinutes';
+import addHours from 'date-fns/addHours';
+import addWeeks from 'date-fns/addWeeks';
+import addMonths from 'date-fns/addMonths';
+import addYears from 'date-fns/addYears';
+import endOfDay from 'date-fns/endOfDay';
+import endOfWeek from 'date-fns/endOfWeek';
+import endOfYear from 'date-fns/endOfYear';
+import dateFnsFormat from 'date-fns/format';
+import getDate from 'date-fns/getDate';
+import getDaysInMonth from 'date-fns/getDaysInMonth';
+import getHours from 'date-fns/getHours';
+import getMinutes from 'date-fns/getMinutes';
+import getMonth from 'date-fns/getMonth';
+import getSeconds from 'date-fns/getSeconds';
+import getMilliseconds from 'date-fns/getMilliseconds';
+import getWeek from 'date-fns/getWeek';
+import getYear from 'date-fns/getYear';
+import isAfter from 'date-fns/isAfter';
+import isBefore from 'date-fns/isBefore';
+import isEqual from 'date-fns/isEqual';
+import isSameDay from 'date-fns/isSameDay';
+import isSameYear from 'date-fns/isSameYear';
+import isSameMonth from 'date-fns/isSameMonth';
+import isSameHour from 'date-fns/isSameHour';
+import isValid from 'date-fns/isValid';
+import dateFnsParse from 'date-fns/parse';
+import setDate from 'date-fns/setDate';
+import setHours from 'date-fns/setHours';
+import setMinutes from 'date-fns/setMinutes';
+import setMonth from 'date-fns/setMonth';
+import setSeconds from 'date-fns/setSeconds';
+import setMilliseconds from 'date-fns/setMilliseconds';
+import setYear from 'date-fns/setYear';
+import startOfDay from 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
+import endOfMonth from 'date-fns/endOfMonth';
+import startOfWeek from 'date-fns/startOfWeek';
+import startOfYear from 'date-fns/startOfYear';
+import isWithinInterval from 'date-fns/isWithinInterval';
+import defaultLocale from 'date-fns/locale/en-US';
+import longFormatters from 'date-fns/_lib/format/longFormatters';
 import { AdapterDateFnsBase } from "../AdapterDateFnsBase/index.js";
 /**
  * Based on `@date-io/date-fns`
@@ -82,18 +78,14 @@ export class AdapterDateFns extends AdapterDateFnsBase {
     /* istanbul ignore next */
     if (process.env.NODE_ENV !== 'production') {
       if (typeof addDays !== 'function') {
-        throw new Error([`MUI: The \`date-fns\` package v2.x is not compatible with this adapter.`, 'Please, install v3.x or v4.x of the package or use the `AdapterDateFns` instead.'].join('\n'));
-      }
-      if (!longFormatters) {
-        throw new Error('MUI: The minimum supported `date-fns` package version compatible with this adapter is `3.2.x`.');
+        throw new Error(['MUI: This adapter is only compatible with `date-fns` v2.x package versions.', 'Please, install v2.x of the package or use the `AdapterDateFns` instead.'].join('\n'));
       }
     }
     super({
-      locale: locale ?? enUS,
+      locale: locale ?? defaultLocale,
       formats,
       longFormatters
     });
-    // TODO: explicit return types can be removed once there is only one date-fns version supported
     this.parse = (value, format) => {
       if (value === '') {
         return null;

package/modern/AdapterDateFnsV2/index.js

@@ -0,0 +1 @@
+export { AdapterDateFns } from "./AdapterDateFnsV2.js";

package/modern/AdapterMoment/AdapterMoment.js

@@ -430,12 +430,22 @@ export class AdapterMoment {
       const end = this.endOfWeek(this.endOfMonth(value));
       let count = 0;
       let current = start;
+      let currentDayOfYear = current.get('dayOfYear');
       const nestedWeeks = [];
       while (current.isBefore(end)) {
         const weekNumber = Math.floor(count / 7);
         nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
         nestedWeeks[weekNumber].push(current);
+        const prevDayOfYear = currentDayOfYear;
         current = this.addDays(current, 1);
+        currentDayOfYear = current.get('dayOfYear');
+
+        // If there is a TZ change at midnight, adding 1 day may only increase the date by 23 hours to 11pm
+        // To fix, bump the date into the next day (add 12 hours) and then revert to the start of the day
+        // See https://github.com/moment/moment/issues/4743#issuecomment-811306874 for context.
+        if (prevDayOfYear === currentDayOfYear) {
+          current = current.add(12, 'h').startOf('day');
+        }
         count += 1;
       }
       return nestedWeeks;

package/modern/DateCalendar/DateCalendar.js

@@ -19,7 +19,7 @@ import { useViews } from "../internals/hooks/useViews.js";
 import { PickersCalendarHeader } from "../PickersCalendarHeader/index.js";
 import { findClosestEnabledDate, applyDefaultDate, mergeDateAndTime } from "../internals/utils/date-utils.js";
 import { PickerViewRoot } from "../internals/components/PickerViewRoot/index.js";
-import { useDefaultReduceAnimations } from "../internals/hooks/useDefaultReduceAnimations.js";
+import { useReduceAnimations } from "../internals/hooks/useReduceAnimations.js";
 import { getDateCalendarUtilityClass } from "./dateCalendarClasses.js";
 import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithTimezone.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
@@ -36,18 +36,18 @@ const useUtilityClasses = classes => {
 function useDateCalendarDefaultizedProps(props, name) {
   const utils = useUtils();
   const defaultDates = useDefaultDates();
-  const defaultReduceAnimations = useDefaultReduceAnimations();
   const themeProps = useThemeProps({
     props,
     name
   });
+  const reduceAnimations = useReduceAnimations(themeProps.reduceAnimations);
   return _extends({}, themeProps, {
     loading: themeProps.loading ?? false,
     disablePast: themeProps.disablePast ?? false,
     disableFuture: themeProps.disableFuture ?? false,
     openTo: themeProps.openTo ?? 'day',
     views: themeProps.views ?? ['year', 'day'],
-    reduceAnimations: themeProps.reduceAnimations ?? defaultReduceAnimations,
+    reduceAnimations,
     renderLoading: themeProps.renderLoading ?? (() => /*#__PURE__*/_jsx("span", {
       children: "..."
     })),
@@ -137,6 +137,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager
   });
@@ -259,7 +260,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     return handleValueChange(day, 'finish', view);
   });
   React.useEffect(() => {
-    if (value != null && utils.isValid(value)) {
+    if (utils.isValid(value)) {
       changeMonth(value);
     }
   }, [value]); // eslint-disable-line

package/modern/DateCalendar/DayCalendar.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["parentProps", "day", "focusableDay", "selectedDays", "isDateDisabled", "currentMonthNumber", "isViewFocused"],

package/modern/DateCalendar/PickersFadeTransitionGroup.js

@@ -6,10 +6,7 @@ import { styled, useTheme, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { getPickersFadeTransitionGroupUtilityClass } from "./pickersFadeTransitionGroupClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -36,9 +33,10 @@ export function PickersFadeTransitionGroup(inProps) {
     children,
     className,
     reduceAnimations,
-    transKey
+    transKey,
+    classes: classesProp
   } = props;
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   const theme = useTheme();
   if (reduceAnimations) {
     return children;

package/modern/DateCalendar/PickersSlideTransition.js

@@ -7,10 +7,10 @@ import { styled, useTheme, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { getPickersSlideTransitionUtilityClass, pickersSlideTransitionClasses } from "./pickersSlideTransitionClasses.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    classes,
     slideDirection
   } = ownerState;
   const slots = {
@@ -99,11 +99,18 @@ export function PickersSlideTransition(inProps) {
       children,
       className,
       reduceAnimations,
-      transKey
-      // extracting `classes` from `other`
+      slideDirection,
+      transKey,
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    slideDirection
+  });
+  const classes = useUtilityClasses(classesProp, ownerState);
   const theme = useTheme();
   if (reduceAnimations) {
     return /*#__PURE__*/_jsx("div", {

package/modern/DateField/DateField.js

@@ -1,18 +1,14 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];
+const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MuiTextField from '@mui/material/TextField';
 import { useThemeProps } from '@mui/material/styles';
-import useSlotProps from '@mui/utils/useSlotProps';
 import { refType } from '@mui/utils';
 import { useDateField } from "./useDateField.js";
-import { useClearableField } from "../hooks/index.js";
-import { PickersTextField } from "../PickersTextField/index.js";
-import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";
+import { PickerFieldUI, useFieldTextFieldProps } from "../internals/components/PickerFieldUI.js";
+import { CalendarIcon } from "../icons/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -31,33 +27,21 @@ const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, inRe
   });
   const {
       slots,
-      slotProps,
-      InputProps,
-      inputProps
+      slotProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const ownerState = themeProps;
-  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
-  const textFieldProps = useSlotProps({
-    elementType: TextField,
-    externalSlotProps: slotProps?.textField,
-    externalForwardedProps: other,
-    additionalProps: {
-      ref: inRef
-    },
-    ownerState
+  const textFieldProps = useFieldTextFieldProps({
+    slotProps,
+    ref: inRef,
+    externalForwardedProps: other
   });
-
-  // TODO: Remove when mui/material-ui#35088 will be merged
-  textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
-  textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
   const fieldResponse = useDateField(textFieldProps);
-  const convertedFieldResponse = convertFieldResponseIntoMuiTextFieldProps(fieldResponse);
-  const processedFieldProps = useClearableField(_extends({}, convertedFieldResponse, {
-    slots,
-    slotProps
-  }));
-  return /*#__PURE__*/_jsx(TextField, _extends({}, processedFieldProps));
+  return /*#__PURE__*/_jsx(PickerFieldUI, {
+    slots: slots,
+    slotProps: slotProps,
+    fieldResponse: fieldResponse,
+    defaultOpenPickerIcon: CalendarIcon
+  });
 });
 process.env.NODE_ENV !== "production" ? DateField.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -75,6 +59,12 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @default false
    */
   clearable: PropTypes.bool,
+  /**
+   * The position at which the clear button is placed.
+   * If the field is not clearable, the button is not rendered.
+   * @default 'end'
+   */
+  clearButtonPosition: PropTypes.oneOf(['end', 'start']),
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
@@ -218,6 +208,12 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @param {FieldSelectedSections} newValue The new selected sections.
    */
   onSelectedSectionsChange: PropTypes.func,
+  /**
+   * The position at which the opening button is placed.
+   * If there is no picker to open, the button is not rendered
+   * @default 'end'
+   */
+  openPickerButtonPosition: PropTypes.oneOf(['end', 'start']),
   /**
    * If `true`, the component is read-only.
    * When read-only, the value cannot be changed but the user can interact with the interface.
@@ -267,10 +263,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   shouldDisableYear: PropTypes.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.