@mui/x-date-pickers 6.0.2 → 6.0.3

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

@@ -5,9 +5,10 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
+import { useTheme } from '@mui/material/styles';
 import { useValidation } from '../validation/useValidation';
 import { useUtils } from '../useUtils';
-import { adjustSectionValue, isAndroid, cleanString } from './useField.utils';
+import { adjustSectionValue, isAndroid, cleanString, getSectionOrder } from './useField.utils';
 import { useFieldState } from './useFieldState';
 import { useFieldCharacterEditing } from './useFieldCharacterEditing';
 import { getActiveElement } from '../../utils/utils';
@@ -22,7 +23,6 @@ export const useField = params => {
     updateSectionValue,
     updateValueFromValueStr,
     setTempAndroidValueStr,
-    sectionOrder,
     sectionsValueBoundaries
   } = useFieldState(params);
   const {
@@ -38,7 +38,8 @@ export const useField = params => {
       inputRef: inputRefProp,
       internalProps,
       internalProps: {
-        readOnly = false
+        readOnly = false,
+        unstableFieldRef
       },
       forwardedProps: {
         onClick,
@@ -57,6 +58,8 @@ export const useField = params => {
   const inputRef = React.useRef(null);
   const handleRef = useForkRef(inputRefProp, inputRef);
   const focusTimeoutRef = React.useRef(undefined);
+  const theme = useTheme();
+  const sectionOrder = React.useMemo(() => getSectionOrder(state.sections, theme.direction === 'rtl'), [theme.direction, state.sections]);
   const syncSelectionFromDOM = () => {
     if (readOnly) {
       setSelectedSections(null);
@@ -143,27 +146,32 @@ export const useField = params => {
       updateValueFromValueStr(cleanValueStr);
       return;
     }
-    const prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections));
-    let startOfDiffIndex = -1;
-    let endOfDiffIndex = -1;
-    for (let i = 0; i < prevValueStr.length; i += 1) {
-      if (startOfDiffIndex === -1 && prevValueStr[i] !== cleanValueStr[i]) {
-        startOfDiffIndex = i;
+    let keyPressed;
+    if (selectedSectionIndexes.startIndex === 0 && selectedSectionIndexes.endIndex === state.sections.length - 1) {
+      keyPressed = cleanValueStr;
+    } else {
+      const prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections));
+      let startOfDiffIndex = -1;
+      let endOfDiffIndex = -1;
+      for (let i = 0; i < prevValueStr.length; i += 1) {
+        if (startOfDiffIndex === -1 && prevValueStr[i] !== cleanValueStr[i]) {
+          startOfDiffIndex = i;
+        }
+        if (endOfDiffIndex === -1 && prevValueStr[prevValueStr.length - i - 1] !== cleanValueStr[cleanValueStr.length - i - 1]) {
+          endOfDiffIndex = i;
+        }
       }
-      if (endOfDiffIndex === -1 && prevValueStr[prevValueStr.length - i - 1] !== cleanValueStr[cleanValueStr.length - i - 1]) {
-        endOfDiffIndex = i;
+      const activeSection = state.sections[selectedSectionIndexes.startIndex];
+      const hasDiffOutsideOfActiveSection = startOfDiffIndex < activeSection.start || prevValueStr.length - endOfDiffIndex - 1 > activeSection.end;
+      if (hasDiffOutsideOfActiveSection) {
+        // TODO: Support if the new date is valid
+        return;
       }
-    }
-    const activeSection = state.sections[selectedSectionIndexes.startIndex];
-    const hasDiffOutsideOfActiveSection = startOfDiffIndex < activeSection.start || prevValueStr.length - endOfDiffIndex - 1 > activeSection.end;
-    if (hasDiffOutsideOfActiveSection) {
-      // TODO: Support if the new date is valid
-      return;
-    }
 
-    // The active section being selected, the browser has replaced its value with the key pressed by the user.
-    const activeSectionEndRelativeToNewValue = cleanValueStr.length - prevValueStr.length + activeSection.end - cleanString(activeSection.endSeparator || '').length;
-    const keyPressed = cleanValueStr.slice(activeSection.start, activeSectionEndRelativeToNewValue);
+      // The active section being selected, the browser has replaced its value with the key pressed by the user.
+      const activeSectionEndRelativeToNewValue = cleanValueStr.length - prevValueStr.length + activeSection.end - cleanString(activeSection.endSeparator || '').length;
+      keyPressed = cleanValueStr.slice(activeSection.start, activeSectionEndRelativeToNewValue);
+    }
     if (isAndroid() && keyPressed.length === 0) {
       setTempAndroidValueStr(valueStr);
       return;
@@ -259,9 +267,11 @@ export const useField = params => {
   });
   useEnhancedEffect(() => {
     if (selectedSectionIndexes == null) {
-      if (inputRef.current.selectionStart !== 0 || inputRef.current.selectionEnd !== 0) {
-        // Ensure input selection range is in sync with component selection indexes
-        inputRef.current.setSelectionRange(0, 0);
+      if (inputRef.current.scrollLeft) {
+        // Ensure that input content is not marked as selected.
+        // setting selection range to 0 causes issues in Safari.
+        // https://bugs.webkit.org/show_bug.cgi?id=224425
+        inputRef.current.scrollLeft = 0;
       }
       return;
     }
@@ -274,7 +284,11 @@ export const useField = params => {
       selectionEnd += lastSelectedSection.endSeparator.length;
     }
     if (selectionStart !== inputRef.current.selectionStart || selectionEnd !== inputRef.current.selectionEnd) {
+      // Fix scroll jumping on iOS browser: https://github.com/mui/mui-x/issues/8321
+      const currentScrollTop = inputRef.current.scrollTop;
       inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+      // Even reading this variable seems to do the trick, but also setting it just to make use of it
+      inputRef.current.scrollTop = currentScrollTop;
     }
   });
   const validationError = useValidation(_extends({}, internalProps, {
@@ -318,7 +332,21 @@ export const useField = params => {
     return 'tel';
   }, [selectedSectionIndexes, state.sections]);
   const inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document);
-  const shouldShowPlaceholder = !inputHasFocus && (!state.value || valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue));
+  const shouldShowPlaceholder = !inputHasFocus && valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);
+  React.useImperativeHandle(unstableFieldRef, () => ({
+    getSections: () => state.sections,
+    getActiveSectionIndex: () => {
+      const browserStartIndex = inputRef.current.selectionStart ?? 0;
+      const browserEndIndex = inputRef.current.selectionEnd ?? 0;
+      if (browserStartIndex === 0 && browserEndIndex === 0) {
+        return null;
+      }
+      const nextSectionIndex = browserStartIndex <= state.sections[0].startInInput ? 1 // Special case if browser index is in invisible characters at the beginning.
+      : state.sections.findIndex(section => section.startInInput - section.startSeparator.length > browserStartIndex);
+      return nextSectionIndex === -1 ? state.sections.length - 1 : nextSectionIndex - 1;
+    },
+    setSelectedSections: activeSectionIndex => setSelectedSections(activeSectionIndex)
+  }));
   return _extends({
     placeholder: state.placeholder,
     autoComplete: 'off'

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

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
 import useControlled from '@mui/utils/useControlled';
 import { useUtils, useLocaleText, useLocalizationContext } from '../useUtils';
 import { addPositionPropertiesToSections, splitFormatIntoSections, clampDaySection, mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections } from './useField.utils';
@@ -8,8 +7,6 @@ export const useFieldState = params => {
   const utils = useUtils();
   const localeText = useLocaleText();
   const adapter = useLocalizationContext();
-  const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
   const {
     valueManager,
     fieldValueManager,
@@ -28,7 +25,6 @@ export const useFieldState = params => {
   const firstDefaultValue = React.useRef(defaultValue);
   const valueFromTheOutside = valueProp ?? firstDefaultValue.current ?? valueManager.emptyValue;
   const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils), [utils]);
-  const sectionOrder = React.useMemo(() => fieldValueManager.getSectionOrder(utils, localeText, format, isRTL), [fieldValueManager, format, isRTL, localeText, utils]);
   const placeholder = React.useMemo(() => fieldValueManager.getValueStrFromSections(fieldValueManager.getSectionsFromValue(utils, localeText, null, valueManager.emptyValue, format)), [fieldValueManager, format, localeText, utils, valueManager.emptyValue]);
   const [state, setState] = React.useState(() => {
     const sections = fieldValueManager.getSectionsFromValue(utils, localeText, null, valueFromTheOutside, format);
@@ -216,7 +212,7 @@ export const useFieldState = params => {
   }));
   React.useEffect(() => {
     if (!valueManager.areValuesEqual(utils, state.value, valueFromTheOutside)) {
-      const sections = fieldValueManager.getSectionsFromValue(utils, localeText, state.sections, valueFromTheOutside, format);
+      const sections = fieldValueManager.getSectionsFromValue(utils, localeText, null, valueFromTheOutside, format);
       setState(prevState => _extends({}, prevState, {
         value: valueFromTheOutside,
         referenceValue: fieldValueManager.updateReferenceValue(utils, valueFromTheOutside, prevState.referenceValue),
@@ -243,7 +239,6 @@ export const useFieldState = params => {
     updateSectionValue,
     updateValueFromValueStr,
     setTempAndroidValueStr,
-    sectionOrder,
     sectionsValueBoundaries
   };
 };

package/modern/internals/hooks/usePicker/usePickerValue.js

@@ -25,13 +25,12 @@ export const usePickerValue = ({
   } = props;
   const utils = useUtils();
   const adapter = useLocalizationContext();
-  const [rawValue, setValue] = useControlled({
+  const [value, setValue] = useControlled({
     controlled: inValue,
     default: defaultValue ?? valueManager.emptyValue,
     name: 'usePickerValue',
     state: 'value'
   });
-  const value = React.useMemo(() => valueManager.cleanValue(utils, rawValue), [valueManager, utils, rawValue]);
   const [selectedSections, setSelectedSections] = useControlled({
     controlled: selectedSectionsProp,
     default: null,
@@ -81,7 +80,7 @@ export const usePickerValue = ({
           }
       }
     });
-    if (params.forceOnChangeCall || !params.skipOnChangeCall && !valueManager.areValuesEqual(utils, dateState.committed, params.value)) {
+    if (!params.skipOnChangeCall && !valueManager.areValuesEqual(utils, dateState.committed, params.value)) {
       setValue(params.value);
       if (onChange) {
         const context = {
@@ -126,18 +125,14 @@ export const usePickerValue = ({
     // Reset all date in state to the empty value and close picker.
     setDate({
       value: valueManager.emptyValue,
-      action: 'acceptAndClose',
-      // force `onChange` in cases like input (value) === `Invalid date`
-      forceOnChangeCall: !valueManager.areValuesEqual(utils, value, valueManager.emptyValue)
+      action: 'acceptAndClose'
     });
   });
   const handleAccept = useEventCallback(() => {
     // Set all date in state to equal the current draft value and close picker.
     setDate({
       value: dateState.draft,
-      action: 'acceptAndClose',
-      // force `onChange` in cases like input (value) === `Invalid date`
-      forceOnChangeCall: !valueManager.areValuesEqual(utils, dateState.committed, dateState.draft)
+      action: 'acceptAndClose'
     });
   });
   const handleDismiss = useEventCallback(() => {
@@ -230,8 +225,9 @@ export const usePickerValue = ({
     selectedSections,
     onSelectedSectionsChange: handleFieldSelectedSectionsChange
   };
+  const viewValue = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
   const viewResponse = {
-    value: dateState.draft,
+    value: viewValue,
     onChange: handleChange,
     onClose: handleClose,
     open: isOpen,
@@ -248,7 +244,7 @@ export const usePickerValue = ({
     return Array.isArray(testedValue) ? validationResponse.every(v => v === null) : validationResponse === null;
   };
   const layoutResponse = _extends({}, actions, {
-    value: dateState.draft,
+    value: viewValue,
     onChange: handleChangeAndCommit,
     isValid
   });

package/modern/internals/index.js

@@ -9,7 +9,7 @@ export { pickersArrowSwitcherClasses } from './components/PickersArrowSwitcher/p
 export { pickersPopperClasses } from './components/pickersPopperClasses';
 export { PickersToolbarButton } from './components/PickersToolbarButton';
 export { DAY_MARGIN, DIALOG_WIDTH } from './constants/dimensions';
-export { useField, createDateStrForInputFromSections, addPositionPropertiesToSections, splitFormatIntoSections, getSectionOrder } from './hooks/useField';
+export { useField, createDateStrForInputFromSections, addPositionPropertiesToSections, splitFormatIntoSections } from './hooks/useField';
 export { usePicker } from './hooks/usePicker';
 export { useStaticPicker } from './hooks/useStaticPicker';
 export { useLocalizationContext, useDefaultDates, useUtils, useLocaleText, useNow } from './hooks/useUtils';
@@ -18,7 +18,7 @@ export { validateDate } from './hooks/validation/useDateValidation';
 export { validateTime } from './hooks/validation/useTimeValidation';
 export { validateDateTime } from './hooks/validation/useDateTimeValidation';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
-export { applyDefaultDate, replaceInvalidDateByNull } from './utils/date-utils';
+export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual } from './utils/date-utils';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './utils/utils';
 export { defaultReduceAnimations } from './utils/defaultReduceAnimations';
 export { extractValidationProps } from './utils/validation';

package/modern/internals/utils/date-utils.js

@@ -63,4 +63,10 @@ export const applyDefaultDate = (utils, value, defaultValue) => {
     return defaultValue;
   }
   return value;
+};
+export const areDatesEqual = (utils, a, b) => {
+  if (!utils.isValid(a) && a != null && !utils.isValid(b) && b != null) {
+    return true;
+  }
+  return utils.isEqual(a, b);
 };

package/modern/internals/utils/valueManagers.js

@@ -1,10 +1,10 @@
-import { replaceInvalidDateByNull } from './date-utils';
-import { addPositionPropertiesToSections, createDateStrForInputFromSections, splitFormatIntoSections, getSectionOrder } from '../hooks/useField/useField.utils';
+import { areDatesEqual, replaceInvalidDateByNull } from './date-utils';
+import { addPositionPropertiesToSections, createDateStrForInputFromSections, splitFormatIntoSections } from '../hooks/useField/useField.utils';
 export const singleItemValueManager = {
   emptyValue: null,
   getTodayValue: utils => utils.date(),
   cleanValue: replaceInvalidDateByNull,
-  areValuesEqual: (utils, a, b) => utils.isEqual(a, b),
+  areValuesEqual: areDatesEqual,
   isSameError: (a, b) => a === b,
   defaultErrorState: null
 };
@@ -28,6 +28,5 @@ export const singleItemFieldValueManager = {
     })
   }),
   parseValueStr: (valueStr, referenceValue, parseDate) => parseDate(valueStr.trim(), referenceValue),
-  hasError: error => error != null,
-  getSectionOrder: (utils, localeText, format, isRTL) => getSectionOrder(splitFormatIntoSections(utils, localeText, format, null), isRTL)
+  hasError: error => error != null
 };

package/modern/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/modern/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/modern/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/modern/models/index.js

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

package/modern/tests/describeValue/testPickerOpenCloseLifeCycle.js

@@ -87,7 +87,7 @@ export const testPickerOpenCloseLifeCycle = (ElementToTest, getOptions) => {
       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', () => {
+    it('should not select input content after closing on mobile', () => {
       if (pickerParams.variant !== 'mobile') {
         return;
       }
@@ -103,8 +103,7 @@ export const testPickerOpenCloseLifeCycle = (ElementToTest, getOptions) => {
       } 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', () => {
       const onChange = spy();

package/node/AdapterDateFns/index.js

@@ -144,6 +144,7 @@ class AdapterDateFns extends _dateFns.default {
         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/node/AdapterDateFnsJalali/index.js

@@ -75,6 +75,7 @@ class AdapterDateFnsJalali extends _dateFnsJalali.default {
         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/node/AdapterDayjs/index.js

@@ -83,6 +83,10 @@ class AdapterDayjs extends _dayjs2.default {
       /* 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();
 
@@ -93,6 +97,7 @@ class AdapterDayjs extends _dayjs2.default {
         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/node/AdapterLuxon/index.js

@@ -99,6 +99,7 @@ class AdapterLuxon extends _luxon2.default {
         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/node/AdapterMoment/index.js

@@ -72,6 +72,10 @@ class AdapterMoment extends _moment2.default {
       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;
@@ -86,6 +90,7 @@ class AdapterMoment extends _moment2.default {
     this.getCurrentLocaleCode = () => {
       return this.locale || _moment.default.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/node/AdapterMomentHijri/index.js

@@ -54,6 +54,10 @@ class AdapterMomentHijri extends _hijri.default {
       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;
@@ -65,6 +69,7 @@ class AdapterMomentHijri extends _hijri.default {
         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/node/AdapterMomentJalaali/index.js

@@ -53,6 +53,10 @@ class AdapterMomentJalaali extends _jalaali.default {
       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;
@@ -64,6 +68,7 @@ class AdapterMomentJalaali extends _jalaali.default {
         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/node/DateField/DateField.js

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

package/node/DateField/useDateField.js

@@ -12,7 +12,7 @@ var _useField = require("../internals/hooks/useField");
 var _useDateValidation = require("../internals/hooks/validation/useDateValidation");
 var _dateUtils = require("../internals/utils/date-utils");
 var _useUtils = require("../internals/hooks/useUtils");
-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"];
 const useDefaultizedDateField = props => {
   const utils = (0, _useUtils.useUtils)();
   const defaultDates = (0, _useUtils.useDefaultDates)();
@@ -44,7 +44,8 @@ const useDateField = ({
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     } = _useDefaultizedDateFi,
     other = (0, _objectWithoutPropertiesLoose2.default)(_useDefaultizedDateFi, _excluded);
   return (0, _useField.useField)({
@@ -65,7 +66,8 @@ const useDateField = ({
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     },
     valueManager: _valueManagers.singleItemValueManager,
     fieldValueManager: _valueManagers.singleItemFieldValueManager,

package/node/DateTimeField/DateTimeField.js

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

package/node/DateTimeField/useDateTimeField.js

@@ -12,7 +12,7 @@ var _useField = require("../internals/hooks/useField");
 var _useDateTimeValidation = require("../internals/hooks/validation/useDateTimeValidation");
 var _dateUtils = require("../internals/utils/date-utils");
 var _useUtils = require("../internals/hooks/useUtils");
-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"];
 const useDefaultizedDateTimeField = props => {
   const utils = (0, _useUtils.useUtils)();
   const defaultDates = (0, _useUtils.useDefaultDates)();
@@ -56,7 +56,8 @@ const useDateTimeField = ({
       shouldDisableTime,
       selectedSections,
       onSelectedSectionsChange,
-      ampm
+      ampm,
+      unstableFieldRef
     } = _useDefaultizedDateTi,
     other = (0, _objectWithoutPropertiesLoose2.default)(_useDefaultizedDateTi, _excluded);
   return (0, _useField.useField)({
@@ -84,7 +85,8 @@ const useDateTimeField = ({
       disableIgnoringDatePartForTimeValidation,
       selectedSections,
       onSelectedSectionsChange,
-      ampm
+      ampm,
+      unstableFieldRef
     },
     valueManager: _valueManagers.singleItemValueManager,
     fieldValueManager: _valueManagers.singleItemFieldValueManager,