@mui/x-date-pickers 6.0.2 → 6.0.3

package/legacy/locales/faIR.js

@@ -36,11 +36,14 @@ var faIRPickers = {
     return "".concat(seconds, " \u062B\u0627\u0646\u06CC\u0647 \u0647\u0627");
   },
   // Calendar labels
-  // calendarWeekNumberHeaderLabel: 'Week number',
-  // calendarWeekNumberHeaderText: '#',
-  // calendarWeekNumberAriaLabelText: weekNumber => `Week ${weekNumber}`,
-  // calendarWeekNumberText: weekNumber => `${weekNumber}`,
-
+  calendarWeekNumberHeaderLabel: 'عدد هفته',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: function calendarWeekNumberAriaLabelText(weekNumber) {
+    return "\u0647\u0641\u062A\u0647 ".concat(weekNumber);
+  },
+  calendarWeekNumberText: function calendarWeekNumberText(weekNumber) {
+    return "".concat(weekNumber);
+  },
   // Open picker labels
   openDatePickerDialogue: function openDatePickerDialogue(value, utils) {
     return value !== null && utils.isValid(value) ? "\u062A\u0627\u0631\u06CC\u062E \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F\u060C \u062A\u0627\u0631\u06CC\u062E \u0627\u0646\u062A\u062E\u0627\u0628 \u0634\u062F\u0647 ".concat(utils.format(value, 'fullDate'), " \u0645\u06CC \u0628\u0627\u0634\u062F") : 'تاریخ را انتخاب کنید';
@@ -50,17 +53,31 @@ var faIRPickers = {
   },
   // Table labels
   timeTableLabel: 'انتخاب تاریخ',
-  dateTableLabel: 'انتخاب ساعت'
-
+  dateTableLabel: 'انتخاب ساعت',
   // Field section placeholders
-  // fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
-  // fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
-  // fieldDayPlaceholder: () => 'DD',
-  // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
-  // fieldHoursPlaceholder: () => 'hh',
-  // fieldMinutesPlaceholder: () => 'mm',
-  // fieldSecondsPlaceholder: () => 'ss',
-  // fieldMeridiemPlaceholder: () => 'aa',
+  fieldYearPlaceholder: function fieldYearPlaceholder(params) {
+    return 'Y'.repeat(params.digitAmount);
+  },
+  fieldMonthPlaceholder: function fieldMonthPlaceholder(params) {
+    return params.contentType === 'letter' ? 'MMMM' : 'MM';
+  },
+  fieldDayPlaceholder: function fieldDayPlaceholder() {
+    return 'DD';
+  },
+  fieldWeekDayPlaceholder: function fieldWeekDayPlaceholder(params) {
+    return params.contentType === 'letter' ? 'EEEE' : 'EE';
+  },
+  fieldHoursPlaceholder: function fieldHoursPlaceholder() {
+    return 'hh';
+  },
+  fieldMinutesPlaceholder: function fieldMinutesPlaceholder() {
+    return 'mm';
+  },
+  fieldSecondsPlaceholder: function fieldSecondsPlaceholder() {
+    return 'ss';
+  },
+  fieldMeridiemPlaceholder: function fieldMeridiemPlaceholder() {
+    return 'aa';
+  }
 };
-
 export var faIR = getPickersLocalization(faIRPickers);

package/legacy/locales/nlNL.js

@@ -18,11 +18,10 @@ var nlNLPickers = {
   okButtonLabel: 'OK',
   todayButtonLabel: 'Vandaag',
   // Toolbar titles
-  // datePickerToolbarTitle: 'Select date',
-  // dateTimePickerToolbarTitle: 'Select date & time',
-  // timePickerToolbarTitle: 'Select time',
-  // dateRangePickerToolbarTitle: 'Select date range',
-
+  datePickerToolbarTitle: 'Selecteer datum',
+  dateTimePickerToolbarTitle: 'Selecteer datum & tijd',
+  timePickerToolbarTitle: 'Selecteer tijd',
+  dateRangePickerToolbarTitle: 'Selecteer datumbereik',
   // Clock labels
   clockLabelText: function clockLabelText(view, time, adapter) {
     return "Selecteer ".concat(view, ". ").concat(time === null ? 'Geen tijd geselecteerd' : "Geselecteerde tijd is ".concat(adapter.format(time, 'fullTime')));
@@ -37,11 +36,14 @@ var nlNLPickers = {
     return "".concat(seconds, " seconden");
   },
   // Calendar labels
-  // calendarWeekNumberHeaderLabel: 'Week number',
-  // calendarWeekNumberHeaderText: '#',
-  // calendarWeekNumberAriaLabelText: weekNumber => `Week ${weekNumber}`,
-  // calendarWeekNumberText: weekNumber => `${weekNumber}`,
-
+  calendarWeekNumberHeaderLabel: 'Weeknummer',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: function calendarWeekNumberAriaLabelText(weekNumber) {
+    return "Week ".concat(weekNumber);
+  },
+  calendarWeekNumberText: function calendarWeekNumberText(weekNumber) {
+    return "".concat(weekNumber);
+  },
   // Open picker labels
   openDatePickerDialogue: function openDatePickerDialogue(value, utils) {
     return value !== null && utils.isValid(value) ? "Kies datum, geselecteerde datum is ".concat(utils.format(value, 'fullDate')) : 'Kies datum';

package/legacy/locales/plPL.js

@@ -18,11 +18,10 @@ var plPLPickers = {
   okButtonLabel: 'Zatwierdź',
   todayButtonLabel: 'Dzisiaj',
   // Toolbar titles
-  // datePickerToolbarTitle: 'Select date',
-  // dateTimePickerToolbarTitle: 'Select date & time',
-  // timePickerToolbarTitle: 'Select time',
-  // dateRangePickerToolbarTitle: 'Select date range',
-
+  datePickerToolbarTitle: 'Wybierz datę',
+  dateTimePickerToolbarTitle: 'Wybierz datę i czas',
+  timePickerToolbarTitle: 'Wybierz czas',
+  dateRangePickerToolbarTitle: 'Wybierz zakres dat',
   // Clock labels
   clockLabelText: function clockLabelText(view, time, adapter) {
     return "Select ".concat(view, ". ").concat(time === null ? 'Nie wybrano czasu' : "Wybrany czas to ".concat(adapter.format(time, 'fullTime')));
@@ -37,11 +36,14 @@ var plPLPickers = {
     return "".concat(seconds, " sekund");
   },
   // Calendar labels
-  // calendarWeekNumberHeaderLabel: 'Week number',
-  // calendarWeekNumberHeaderText: '#',
-  // calendarWeekNumberAriaLabelText: weekNumber => `Week ${weekNumber}`,
-  // calendarWeekNumberText: weekNumber => `${weekNumber}`,
-
+  calendarWeekNumberHeaderLabel: 'Numer tygodnia',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: function calendarWeekNumberAriaLabelText(weekNumber) {
+    return "Tydzie\u0144 ".concat(weekNumber);
+  },
+  calendarWeekNumberText: function calendarWeekNumberText(weekNumber) {
+    return "".concat(weekNumber);
+  },
   // Open picker labels
   openDatePickerDialogue: function openDatePickerDialogue(value, utils) {
     return value != null && utils.isValid(value) ? "Wybierz dat\u0119, obecnie wybrana data to ".concat(utils.format(value, 'fullDate')) : 'Wybierz datę';

package/legacy/models/index.js

@@ -0,0 +1 @@
+export {};

package/legacy/tests/describeValue/testPickerOpenCloseLifeCycle.js

@@ -85,7 +85,7 @@ export var testPickerOpenCloseLifeCycle = function testPickerOpenCloseLifeCycle(
       expect(onAccept.callCount).to.equal(pickerParams.variant === 'mobile' ? 0 : 1);
       expect(onClose.callCount).to.equal(pickerParams.variant === 'mobile' ? 0 : 1);
     });
-    it('should not select any field section after closing on mobile', function () {
+    it('should not select input content after closing on mobile', function () {
       if (pickerParams.variant !== 'mobile') {
         return;
       }
@@ -101,8 +101,7 @@ export var testPickerOpenCloseLifeCycle = function testPickerOpenCloseLifeCycle(
       } else {
         textbox = getTextbox();
       }
-      expect(textbox.selectionStart).to.be.equal(0);
-      expect(textbox.selectionEnd).to.be.equal(0);
+      expect(textbox.scrollLeft).to.be.equal(0);
     });
     it('should call onChange, onClose and onAccept when selecting a value and `props.closeOnSelect` is true', function () {
       var onChange = spy();

package/locales/faIR.js

@@ -26,27 +26,24 @@ const faIRPickers = {
   minutesClockNumberText: minutes => `${minutes} دقیقه ها`,
   secondsClockNumberText: seconds => `${seconds} ثانیه ها`,
   // Calendar labels
-  // calendarWeekNumberHeaderLabel: 'Week number',
-  // calendarWeekNumberHeaderText: '#',
-  // calendarWeekNumberAriaLabelText: weekNumber => `Week ${weekNumber}`,
-  // calendarWeekNumberText: weekNumber => `${weekNumber}`,
-
+  calendarWeekNumberHeaderLabel: 'عدد هفته',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: weekNumber => `هفته ${weekNumber}`,
+  calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `تاریخ را انتخاب کنید، تاریخ انتخاب شده ${utils.format(value, 'fullDate')} می باشد` : 'تاریخ را انتخاب کنید',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `ساعت را انتخاب کنید، ساعت انتخاب شده ${utils.format(value, 'fullTime')} می باشد` : 'ساعت را انتخاب کنید',
   // Table labels
   timeTableLabel: 'انتخاب تاریخ',
-  dateTableLabel: 'انتخاب ساعت'
-
+  dateTableLabel: 'انتخاب ساعت',
   // Field section placeholders
-  // fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
-  // fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
-  // fieldDayPlaceholder: () => 'DD',
-  // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
-  // fieldHoursPlaceholder: () => 'hh',
-  // fieldMinutesPlaceholder: () => 'mm',
-  // fieldSecondsPlaceholder: () => 'ss',
-  // fieldMeridiemPlaceholder: () => 'aa',
+  fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
+  fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
+  fieldDayPlaceholder: () => 'DD',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldHoursPlaceholder: () => 'hh',
+  fieldMinutesPlaceholder: () => 'mm',
+  fieldSecondsPlaceholder: () => 'ss',
+  fieldMeridiemPlaceholder: () => 'aa'
 };
-
 export const faIR = getPickersLocalization(faIRPickers);

package/locales/nlNL.js

@@ -16,22 +16,20 @@ const nlNLPickers = {
   okButtonLabel: 'OK',
   todayButtonLabel: 'Vandaag',
   // Toolbar titles
-  // datePickerToolbarTitle: 'Select date',
-  // dateTimePickerToolbarTitle: 'Select date & time',
-  // timePickerToolbarTitle: 'Select time',
-  // dateRangePickerToolbarTitle: 'Select date range',
-
+  datePickerToolbarTitle: 'Selecteer datum',
+  dateTimePickerToolbarTitle: 'Selecteer datum & tijd',
+  timePickerToolbarTitle: 'Selecteer tijd',
+  dateRangePickerToolbarTitle: 'Selecteer datumbereik',
   // Clock labels
   clockLabelText: (view, time, adapter) => `Selecteer ${view}. ${time === null ? 'Geen tijd geselecteerd' : `Geselecteerde tijd is ${adapter.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} uren`,
   minutesClockNumberText: minutes => `${minutes} minuten`,
   secondsClockNumberText: seconds => `${seconds} seconden`,
   // Calendar labels
-  // calendarWeekNumberHeaderLabel: 'Week number',
-  // calendarWeekNumberHeaderText: '#',
-  // calendarWeekNumberAriaLabelText: weekNumber => `Week ${weekNumber}`,
-  // calendarWeekNumberText: weekNumber => `${weekNumber}`,
-
+  calendarWeekNumberHeaderLabel: 'Weeknummer',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: weekNumber => `Week ${weekNumber}`,
+  calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Kies datum, geselecteerde datum is ${utils.format(value, 'fullDate')}` : 'Kies datum',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Kies tijd, geselecteerde tijd is ${utils.format(value, 'fullTime')}` : 'Kies tijd',

package/locales/plPL.js

@@ -16,22 +16,20 @@ const plPLPickers = {
   okButtonLabel: 'Zatwierdź',
   todayButtonLabel: 'Dzisiaj',
   // Toolbar titles
-  // datePickerToolbarTitle: 'Select date',
-  // dateTimePickerToolbarTitle: 'Select date & time',
-  // timePickerToolbarTitle: 'Select time',
-  // dateRangePickerToolbarTitle: 'Select date range',
-
+  datePickerToolbarTitle: 'Wybierz datę',
+  dateTimePickerToolbarTitle: 'Wybierz datę i czas',
+  timePickerToolbarTitle: 'Wybierz czas',
+  dateRangePickerToolbarTitle: 'Wybierz zakres dat',
   // Clock labels
   clockLabelText: (view, time, adapter) => `Select ${view}. ${time === null ? 'Nie wybrano czasu' : `Wybrany czas to ${adapter.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} godzin`,
   minutesClockNumberText: minutes => `${minutes} minut`,
   secondsClockNumberText: seconds => `${seconds} sekund`,
   // Calendar labels
-  // calendarWeekNumberHeaderLabel: 'Week number',
-  // calendarWeekNumberHeaderText: '#',
-  // calendarWeekNumberAriaLabelText: weekNumber => `Week ${weekNumber}`,
-  // calendarWeekNumberText: weekNumber => `${weekNumber}`,
-
+  calendarWeekNumberHeaderLabel: 'Numer tygodnia',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: weekNumber => `Tydzień ${weekNumber}`,
+  calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value != null && utils.isValid(value) ? `Wybierz datę, obecnie wybrana data to ${utils.format(value, 'fullDate')}` : 'Wybierz datę',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Wybierz czas, obecnie wybrany czas to ${utils.format(value, 'fullTime')}` : 'Wybierz czas',

package/models/index.d.ts

@@ -0,0 +1,6 @@
+export type { FieldSection, FieldSelectedSections, FieldRef } from '../internals/hooks/useField';
+export type { BaseSingleInputFieldProps } from '../internals/models/fields';
+export type { FieldSectionType } from '../internals/models/muiPickersAdapter';
+export type { DateValidationError } from '../internals/hooks/validation/useDateValidation';
+export type { TimeValidationError } from '../internals/hooks/validation/useTimeValidation';
+export type { DateTimeValidationError } from '../internals/hooks/validation/useDateTimeValidation';

package/models/index.js

@@ -0,0 +1 @@
+export {};

package/models/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/models/index.js",
+  "types": "./index.d.ts"
+}

package/modern/AdapterDateFns/index.js

@@ -136,6 +136,7 @@ export class AdapterDateFns extends BaseAdapterDateFns {
         return token;
       }).join('');
     };
+    // Redefined here just to show how it can be written using expandFormat
     this.getFormatHelperText = format => {
       return this.expandFormat(format).replace(/(aaa|aa|a)/g, '(a|p)m').toLocaleLowerCase();
     };

package/modern/AdapterDateFnsJalali/index.js

@@ -67,6 +67,7 @@ export class AdapterDateFnsJalali extends BaseAdapterDateFnsJalali {
         return token;
       }).join('');
     };
+    // Redefined here just to show how it can be written using expandFormat
     this.getFormatHelperText = format => {
       return this.expandFormat(format).replace(/(aaa|aa|a)/g, '(a|p)m').toLocaleLowerCase();
     };

package/modern/AdapterDayjs/index.js

@@ -75,6 +75,10 @@ export class AdapterDayjs extends BaseAdapterDayjs {
       /* istanbul ignore next */
       return /A|a/.test(this.getLocaleFormats().LT || '');
     };
+    /**
+     * The current getFormatHelperText method uses an outdated format parsing logic.
+     * We should use this one in the future to support all localized formats.
+     */
     this.expandFormat = format => {
       const localeFormats = this.getLocaleFormats();
 
@@ -85,6 +89,7 @@ export class AdapterDayjs extends BaseAdapterDayjs {
         return a || localeFormats[b] || t(localeFormats[B]);
       });
     };
+    // Redefined here just to show how it can be written using expandFormat
     this.getFormatHelperText = format => {
       return this.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
     };

package/modern/AdapterLuxon/index.js

@@ -91,6 +91,7 @@ export class AdapterLuxon extends BaseAdapterLuxon {
         locale: this.locale
       }).replace('yyyyy', 'yyyy');
     };
+    // Redefined here just to show how it can be written using expandFormat
     this.getFormatHelperText = format => {
       return this.expandFormat(format).replace(/(a)/g, '(a|p)m').toLocaleLowerCase();
     };

package/modern/AdapterMoment/index.js

@@ -64,6 +64,10 @@ export class AdapterMoment extends BaseAdapterMoment {
       start: '[',
       end: ']'
     };
+    /**
+     * The current getFormatHelperText method uses an outdated format parsing logic.
+     * We should use this one in the future to support all localized formats.
+     */
     this.expandFormat = format => {
       // @see https://github.com/moment/moment/blob/develop/src/lib/format/format.js#L6
       const localFormattingTokens = /(\[[^[]*\])|(\\)?(LTS|LT|LL?L?L?|l{1,4})|./g;
@@ -78,6 +82,7 @@ export class AdapterMoment extends BaseAdapterMoment {
     this.getCurrentLocaleCode = () => {
       return this.locale || defaultMoment.locale();
     };
+    // Redefined here just to show how it can be written using expandFormat
     this.getFormatHelperText = format => {
       return this.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
     };

package/modern/AdapterMomentHijri/index.js

@@ -48,6 +48,10 @@ export class AdapterMomentHijri extends BaseAdapterMomentHijri {
       start: '[',
       end: ']'
     };
+    /**
+     * The current getFormatHelperText method uses an outdated format parsing logic.
+     * We should use this one in the future to support all localized formats.
+     */
     this.expandFormat = format => {
       // @see https://github.com/moment/moment/blob/develop/src/lib/format/format.js#L6
       const localFormattingTokens = /(\[[^[]*\])|(\\)?(LTS|LT|LL?L?L?|l{1,4})|./g;
@@ -59,6 +63,7 @@ export class AdapterMomentHijri extends BaseAdapterMomentHijri {
         return token;
       }).join('').replace('dd', 'iDD'); // Fix for https://github.com/dmtrKovalenko/date-io/pull/632
     };
+    // Redefined here just to show how it can be written using expandFormat
     this.getFormatHelperText = format => {
       return this.expandFormat(format).replace(/a/gi, '(a|p)m').replace('iY', 'Y').replace('iM', 'M').replace('iD', 'D').toLocaleLowerCase();
     };

package/modern/AdapterMomentJalaali/index.js

@@ -45,6 +45,10 @@ export class AdapterMomentJalaali extends BaseAdapterMomentJalaali {
       start: '[',
       end: ']'
     };
+    /**
+     * The current getFormatHelperText method uses an outdated format parsing logic.
+     * We should use this one in the future to support all localized formats.
+     */
     this.expandFormat = format => {
       // @see https://github.com/moment/moment/blob/develop/src/lib/format/format.js#L6
       const localFormattingTokens = /(\[[^[]*\])|(\\)?(LTS|LT|LL?L?L?|l{1,4})|./g;
@@ -56,6 +60,7 @@ export class AdapterMomentJalaali extends BaseAdapterMomentJalaali {
         return token;
       }).join('').replace('dd', 'jDD'); // Fix for https://github.com/dmtrKovalenko/date-io/pull/632;
     };
+    // Redefined here just to show how it can be written using expandFormat
     this.getFormatHelperText = format => {
       return this.expandFormat(format).replace(/a/gi, '(a|p)m').replace('jY', 'Y').replace('jM', 'M').replace('jD', 'D').toLocaleLowerCase();
     };

package/modern/DateField/DateField.js

@@ -268,6 +268,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/modern/DateField/useDateField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"];
+const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
 import { validateDate } from '../internals/hooks/validation/useDateValidation';
@@ -37,7 +37,8 @@ export const useDateField = ({
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     } = _useDefaultizedDateFi,
     other = _objectWithoutPropertiesLoose(_useDefaultizedDateFi, _excluded);
   return useField({
@@ -58,7 +59,8 @@ export const useDateField = ({
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     },
     valueManager: singleItemValueManager,
     fieldValueManager: singleItemFieldValueManager,

package/modern/DateTimeField/DateTimeField.js

@@ -316,6 +316,10 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/modern/DateTimeField/useDateTimeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "disableIgnoringDatePartForTimeValidation", "shouldDisableClock", "shouldDisableTime", "selectedSections", "onSelectedSectionsChange", "ampm"];
+const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "disableIgnoringDatePartForTimeValidation", "shouldDisableClock", "shouldDisableTime", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
 import { validateDateTime } from '../internals/hooks/validation/useDateTimeValidation';
@@ -49,7 +49,8 @@ export const useDateTimeField = ({
       shouldDisableTime,
       selectedSections,
       onSelectedSectionsChange,
-      ampm
+      ampm,
+      unstableFieldRef
     } = _useDefaultizedDateTi,
     other = _objectWithoutPropertiesLoose(_useDefaultizedDateTi, _excluded);
   return useField({
@@ -77,7 +78,8 @@ export const useDateTimeField = ({
       disableIgnoringDatePartForTimeValidation,
       selectedSections,
       onSelectedSectionsChange,
-      ampm
+      ampm,
+      unstableFieldRef
     },
     valueManager: singleItemValueManager,
     fieldValueManager: singleItemFieldValueManager,

package/modern/PickersDay/PickersDay.js

@@ -36,16 +36,16 @@ const styleArg = ({
   height: DAY_SIZE,
   borderRadius: '50%',
   padding: 0,
-  // background required here to prevent collides with the other days when animating with transition group
-  backgroundColor: (theme.vars || theme).palette.background.paper,
+  // explicitly setting to `transparent` to avoid potentially getting impacted by change from the overridden component
+  backgroundColor: 'transparent',
   color: (theme.vars || theme).palette.text.primary,
   '@media (pointer: fine)': {
     '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
     }
   },
   '&:focus': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
     [`&.${pickersDayClasses.selected}`]: {
       willChange: 'background-color',
       backgroundColor: (theme.vars || theme).palette.primary.dark

package/modern/TimeField/TimeField.js

@@ -279,6 +279,10 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/modern/TimeField/useTimeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm"];
+const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
 import { validateTime } from '../internals/hooks/validation/useTimeValidation';
@@ -37,7 +37,8 @@ export const useTimeField = ({
       disableIgnoringDatePartForTimeValidation,
       selectedSections,
       onSelectedSectionsChange,
-      ampm
+      ampm,
+      unstableFieldRef
     } = _useDefaultizedTimeFi,
     other = _objectWithoutPropertiesLoose(_useDefaultizedTimeFi, _excluded);
   return useField({
@@ -60,7 +61,8 @@ export const useTimeField = ({
       disableIgnoringDatePartForTimeValidation,
       selectedSections,
       onSelectedSectionsChange,
-      ampm
+      ampm,
+      unstableFieldRef
     },
     valueManager: singleItemValueManager,
     fieldValueManager: singleItemFieldValueManager,

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.0.2
+ * @mui/x-date-pickers v6.0.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -14,6 +14,7 @@ export * from './locales';
 export * from './DateField';
 export * from './TimeField';
 export * from './DateTimeField';
+
 // Calendars
 export * from './DateCalendar';
 export * from './MonthCalendar';
@@ -42,4 +43,5 @@ export * from './timeViewRenderers';
 export * from './PickersLayout';
 export * from './PickersActionBar';
 export * from './PickersShortcuts';
-export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
+export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
+export * from './models';

package/modern/internals/hooks/useField/index.js

@@ -1,2 +1,2 @@
 export { useField } from './useField';
-export { splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections, getSectionOrder } from './useField.utils';
+export { splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections } from './useField.utils';