@mui/x-date-pickers 6.0.1 → 6.0.3

package/internals/components/PickersPopper.d.ts

@@ -14,7 +14,7 @@ export interface PickersPopperSlotsComponent {
      */
     DesktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
     /**
-     * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions).
+     * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
      * @default Grow from @mui/material
      */
     DesktopTransition?: React.JSXElementConstructor<MuiTransitionProps>;

package/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts

@@ -12,11 +12,12 @@ import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponen
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue';
 import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
 import { UncapitalizeObjectKeys } from '../../utils/slots-migration';
+import { FieldSection } from '../useField';
 export interface UseDesktopPickerSlotsComponent<TDate, TView extends DateOrTimeView> extends Pick<PickersPopperSlotsComponent, 'DesktopPaper' | 'DesktopTransition' | 'DesktopTrapFocus' | 'Popper'>, ExportedPickersLayoutSlotsComponent<TDate | null, TDate, TView> {
     /**
      * Component used to enter the date with the keyboard.
      */
-    Field: React.ElementType<BaseSingleInputFieldProps<TDate | null, any>>;
+    Field: React.ElementType<BaseSingleInputFieldProps<TDate | null, FieldSection, any>>;
     /**
      * Form control with an input to render the value inside the default field.
      * Receives the same props as `@mui/material/TextField`.
@@ -41,13 +42,13 @@ export interface UseDesktopPickerSlotsComponent<TDate, TView extends DateOrTimeV
 export interface UseDesktopPickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends ExportedUseDesktopPickerSlotsComponentsProps<TDate, TView>, Pick<PickersLayoutSlotsComponentsProps<TDate | null, TDate, TView>, 'toolbar'> {
 }
 export interface ExportedUseDesktopPickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends PickersPopperSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<TDate | null, TDate, TView> {
-    field?: SlotComponentProps<React.ElementType<BaseSingleInputFieldProps<TDate | null, unknown>>, {}, UsePickerProps<TDate | null, any, any, any, any>>;
+    field?: SlotComponentProps<React.ElementType<BaseSingleInputFieldProps<TDate | null, FieldSection, unknown>>, {}, UsePickerProps<TDate | null, any, FieldSection, any, any, any>>;
     textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
     inputAdornment?: Partial<InputAdornmentProps>;
     openPickerButton?: SlotComponentProps<typeof IconButton, {}, UseDesktopPickerProps<TDate, any, any, any>>;
     openPickerIcon?: Record<string, any>;
 }
-export interface DesktopOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, BaseSingleInputNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null>, UsePickerViewsNonStaticProps {
+export interface DesktopOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, BaseSingleInputNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null, FieldSection>, UsePickerViewsNonStaticProps {
     /**
      * If `true`, the `input` element is focused during the first mount.
      */
@@ -65,7 +66,7 @@ export interface UseDesktopPickerProps<TDate, TView extends DateOrTimeView, TErr
      */
     slotProps?: UseDesktopPickerSlotsComponentsProps<TDate, TView>;
 }
-export interface UseDesktopPickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseDesktopPickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, TExternalProps, {}>, 'valueManager' | 'validator'> {
+export interface UseDesktopPickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseDesktopPickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'validator'> {
     props: TExternalProps;
     getOpenDialogAriaText: (date: TDate | null, utils: MuiPickersAdapter<TDate>) => string;
 }

package/internals/hooks/useField/index.d.ts

@@ -1,3 +1,3 @@
 export { useField } from './useField';
-export type { FieldValueManager, FieldSection, UseFieldInternalProps, UseFieldForwardedProps, UseFieldParams, UseFieldResponse, FieldSelectedSections, FieldChangeHandler, FieldChangeHandlerContext, } from './useField.types';
-export { splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections, getSectionOrder, } from './useField.utils';
+export type { FieldValueManager, FieldSection, UseFieldInternalProps, UseFieldForwardedProps, UseFieldParams, UseFieldResponse, FieldSelectedSections, FieldChangeHandler, FieldChangeHandlerContext, FieldRef, } from './useField.types';
+export { splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections, } from './useField.utils';

package/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';

package/internals/hooks/useField/useField.d.ts

@@ -1,2 +1,2 @@
 import { FieldSection, UseFieldParams, UseFieldResponse, UseFieldForwardedProps, UseFieldInternalProps } from './useField.types';
-export declare const useField: <TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any>>(params: UseFieldParams<TValue, TDate, TSection, TForwardedProps, TInternalProps>) => UseFieldResponse<TForwardedProps>;
+export declare const useField: <TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any>>(params: UseFieldParams<TValue, TDate, TSection, TForwardedProps, TInternalProps>) => UseFieldResponse<TForwardedProps>;

package/internals/hooks/useField/useField.js

@@ -5,16 +5,15 @@ 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';
 export const useField = params => {
   const utils = useUtils();
-  if (!utils.formatTokenMap) {
-    throw new Error('This adapter is not compatible with the field components');
-  }
   const {
     state,
     selectedSectionIndexes,
@@ -24,7 +23,6 @@ export const useField = params => {
     updateSectionValue,
     updateValueFromValueStr,
     setTempAndroidValueStr,
-    sectionOrder,
     sectionsValueBoundaries
   } = useFieldState(params);
   const {
@@ -40,7 +38,8 @@ export const useField = params => {
       inputRef: inputRefProp,
       internalProps,
       internalProps: {
-        readOnly = false
+        readOnly = false,
+        unstableFieldRef
       },
       forwardedProps: {
         onClick,
@@ -59,8 +58,14 @@ 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 = () => {
     var _selectionStart;
+    if (readOnly) {
+      setSelectedSections(null);
+      return;
+    }
     const browserStartIndex = (_selectionStart = inputRef.current.selectionStart) != null ? _selectionStart : 0;
     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);
@@ -87,7 +92,7 @@ export const useField = params => {
       if (!input || input !== inputRef.current) {
         return;
       }
-      if (selectedSectionIndexes != null) {
+      if (selectedSectionIndexes != null || readOnly) {
         return;
       }
       if (
@@ -142,27 +147,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;
@@ -258,6 +268,12 @@ export const useField = params => {
   });
   useEnhancedEffect(() => {
     if (selectedSectionIndexes == null) {
+      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;
     }
     const firstSelectedSection = state.sections[selectedSectionIndexes.startIndex];
@@ -269,7 +285,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, {
@@ -315,8 +335,23 @@ export const useField = params => {
     }
     return 'tel';
   }, [selectedSectionIndexes, state.sections]);
-  const inputHasFocus = inputRef.current && inputRef.current === document.activeElement;
-  const shouldShowPlaceholder = !inputHasFocus && (!state.value || valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue));
+  const inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document);
+  const shouldShowPlaceholder = !inputHasFocus && valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);
+  React.useImperativeHandle(unstableFieldRef, () => ({
+    getSections: () => state.sections,
+    getActiveSectionIndex: () => {
+      var _selectionStart2, _selectionEnd;
+      const browserStartIndex = (_selectionStart2 = inputRef.current.selectionStart) != null ? _selectionStart2 : 0;
+      const browserEndIndex = (_selectionEnd = inputRef.current.selectionEnd) != null ? _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/internals/hooks/useField/useField.types.d.ts

@@ -3,7 +3,7 @@ import { FieldSectionType, MuiPickersAdapter } from '../../models';
 import type { PickerValueManager } from '../usePicker';
 import { InferError, Validator } from '../validation/useValidation';
 import { PickersLocaleText } from '../../../locales/utils/pickersLocaleTextApi';
-export interface UseFieldParams<TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any>> {
+export interface UseFieldParams<TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any>> {
     inputRef?: React.Ref<HTMLInputElement>;
     forwardedProps: TForwardedProps;
     internalProps: TInternalProps;
@@ -12,7 +12,7 @@ export interface UseFieldParams<TValue, TDate, TSection extends FieldSection, TF
     validator: Validator<TValue, TDate, InferError<TInternalProps>, UseFieldValidationProps<TValue, TInternalProps>>;
     valueType: FieldValueType;
 }
-export interface UseFieldInternalProps<TValue, TError> {
+export interface UseFieldInternalProps<TValue, TSection extends FieldSection, TError> {
     /**
      * The selected value.
      * Used when the component is controlled.
@@ -63,6 +63,28 @@ export interface UseFieldInternalProps<TValue, TError> {
      * @param {FieldSelectedSections} newValue The new selected sections.
      */
     onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+    /**
+     * The ref object used to imperatively interact with the field.
+     */
+    unstableFieldRef?: React.Ref<FieldRef<TSection>>;
+}
+export interface FieldRef<TSection extends FieldSection> {
+    /**
+     * Returns the sections of the current value.
+     * @returns {TSection[]} The sections of the current value.
+     */
+    getSections: () => TSection[];
+    /**
+     * Returns the index of the active section (the first focused section).
+     * If no section is active, returns `null`.
+     * @returns {number | null} The index of the active section.
+     */
+    getActiveSectionIndex: () => number | null;
+    /**
+     * Updates the selected sections.
+     * @param {FieldSelectedSections} selectedSections The sections to select.
+     */
+    setSelectedSections: (selectedSections: FieldSelectedSections) => void;
 }
 export interface UseFieldForwardedProps {
     onKeyDown?: React.KeyboardEventHandler;
@@ -152,14 +174,19 @@ export interface FieldSection {
     endSeparator: string;
 }
 export type FieldSectionWithoutPosition<TSection extends FieldSection = FieldSection> = Omit<TSection, 'start' | 'end' | 'startInInput' | 'endInInput'>;
-export type FieldSectionsValueBoundaries<TDate> = Record<FieldSectionType, (params: {
-    currentDate: TDate | null;
-    format: string;
-    contentType: 'digit' | 'letter';
-}) => {
+export type FieldSectionValueBoundaries<TDate, SectionType extends FieldSectionType> = {
     minimum: number;
     maximum: number;
-}>;
+} & (SectionType extends 'day' ? {
+    longestMonth: TDate;
+} : {});
+export type FieldSectionsValueBoundaries<TDate> = {
+    [SectionType in FieldSectionType]: (params: {
+        currentDate: TDate | null;
+        format: string;
+        contentType: 'digit' | 'letter';
+    }) => FieldSectionValueBoundaries<TDate, SectionType>;
+};
 export type FieldChangeHandler<TValue, TError> = (value: TValue, context: FieldChangeHandlerContext<TError>) => void;
 export interface FieldChangeHandlerContext<TError> {
     validationError: TError;
@@ -205,12 +232,12 @@ export interface FieldValueManager<TValue, TDate, TSection extends FieldSection,
      * @template TValue, TDate, TSection
      * @param {MuiPickersAdapter<TDate>} utils The utils to manipulate the date.
      * @param {PickersLocaleText<TDate>} localeText The localization object to generate the placeholders.
-     * @param {TSection[] | null} prevSections The last section list stored in state.
+     * @param {TSection[] | null} sections The sections to use as a fallback if a date is null or invalid.
      * @param {TValue} value The current value to generate sections from.
      * @param {string} format The date format.
      * @returns {TSection[]}  The new section list.
      */
-    getSectionsFromValue: (utils: MuiPickersAdapter<TDate>, localeText: PickersLocaleText<TDate>, prevSections: TSection[] | null, value: TValue, format: string) => TSection[];
+    getSectionsFromValue: (utils: MuiPickersAdapter<TDate>, localeText: PickersLocaleText<TDate>, sections: TSection[] | null, value: TValue, format: string) => TSection[];
     /**
      * Creates the string value to render in the input based on the current section list.
      * @template TSection
@@ -264,16 +291,6 @@ export interface FieldValueManager<TValue, TDate, TSection extends FieldSection,
      * @returns {boolean} `true` if the current error is not empty.
      */
     hasError: (error: TError) => boolean;
-    /**
-     * Return a description of sections display order. This description is useful in RTL mode.
-     * @template TDate
-     * @param {MuiPickersAdapter<TDate>} utils The utils to manipulate the date.
-     * @param {PickersLocaleText<TDate>} localeText The translation object.
-     * @param {string} format The format from which sections are computed.
-     * @param {boolean} isRTL Is the field in right-to-left orientation.
-     * @returns {SectionOrdering} The description of sections order from left to right.
-     */
-    getSectionOrder: (utils: MuiPickersAdapter<TDate>, localeText: PickersLocaleText<TDate>, format: string, isRTL: boolean) => SectionOrdering;
 }
 export interface UseFieldState<TValue, TSection extends FieldSection> {
     value: TValue;

package/internals/hooks/useField/useField.utils.d.ts

@@ -1,15 +1,15 @@
-import { FieldSection, AvailableAdjustKeyCode, FieldSectionsValueBoundaries, SectionOrdering, FieldValueType, FieldSectionWithoutPosition } from './useField.types';
+import { FieldSection, AvailableAdjustKeyCode, FieldSectionsValueBoundaries, SectionOrdering, FieldValueType, FieldSectionWithoutPosition, FieldSectionValueBoundaries } from './useField.types';
 import { MuiPickersAdapter, FieldSectionType } from '../../models';
 import { PickersLocaleText } from '../../../locales/utils/pickersLocaleTextApi';
 export declare const getDateSectionConfigFromFormatToken: <TDate>(utils: MuiPickersAdapter<TDate>, formatToken: string) => Pick<FieldSection, 'type' | 'contentType'>;
 export declare const getDaysInWeekStr: <TDate>(utils: MuiPickersAdapter<TDate>, format: string) => string[];
-export declare const cleanLeadingZerosInNumericSectionValue: <TDate>(utils: MuiPickersAdapter<TDate>, format: string, value: string) => string;
 export declare const getLetterEditingOptions: <TDate>(utils: MuiPickersAdapter<TDate>, sectionType: FieldSectionType, format: string) => string[];
+export declare const cleanDigitSectionValue: <TDate>(utils: MuiPickersAdapter<TDate>, value: number, sectionType: FieldSectionType, format: string, hasLeadingZeros: boolean, sectionBoundaries: FieldSectionValueBoundaries<TDate, any>) => string;
 export declare const adjustSectionValue: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate>, section: TSection, keyCode: AvailableAdjustKeyCode, sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>, activeDate: TDate | null) => string;
 export declare const cleanString: (dirtyString: string) => string;
 export declare const addPositionPropertiesToSections: <TSection extends FieldSection>(sections: FieldSectionWithoutPosition<TSection>[]) => TSection[];
 export declare const changeSectionValueFormat: <TDate>(utils: MuiPickersAdapter<TDate>, valueStr: string, currentFormat: string, newFormat: string) => string;
-export declare const doesSectionHaveTrailingZeros: <TDate>(utils: MuiPickersAdapter<TDate>, contentType: 'digit' | 'letter', sectionType: FieldSectionType, format: string) => boolean;
+export declare const doesSectionHaveLeadingZeros: <TDate>(utils: MuiPickersAdapter<TDate>, contentType: 'digit' | 'letter', sectionType: FieldSectionType, format: string) => boolean;
 export declare const splitFormatIntoSections: <TDate>(utils: MuiPickersAdapter<TDate>, localeText: PickersLocaleText<TDate>, format: string, date: TDate | null) => FieldSectionWithoutPosition<FieldSection>[];
 /**
  * Some date libraries like `dayjs` don't support parsing from date with escaped characters.

package/internals/hooks/useField/useField.utils.js

@@ -41,19 +41,6 @@ export const getDaysInWeekStr = (utils, format) => {
   }
   return elements.map(weekDay => utils.formatByString(weekDay, format));
 };
-export const cleanLeadingZerosInNumericSectionValue = (utils, format, value) => {
-  const size = utils.formatByString(utils.date(), format).length;
-  let cleanValue = value;
-
-  // We remove the leading zeros
-  cleanValue = Number(cleanValue).toString();
-
-  // We add enough leading zeros to fill the section
-  while (cleanValue.length < size) {
-    cleanValue = `0${cleanValue}`;
-  }
-  return cleanValue;
-};
 export const getLetterEditingOptions = (utils, sectionType, format) => {
   switch (sectionType) {
     case 'month':
@@ -75,42 +62,70 @@ export const getLetterEditingOptions = (utils, sectionType, format) => {
       }
   }
 };
+export const cleanDigitSectionValue = (utils, value, sectionType, format, hasLeadingZeros, sectionBoundaries) => {
+  const hasLetter = () => {
+    const startOfYear = utils.startOfYear(utils.date());
+    const startOfYearStr = utils.formatByString(startOfYear, format);
+    return Number.isNaN(Number(startOfYearStr));
+  };
+  if (process.env.NODE_ENV !== 'production') {
+    if (sectionType !== 'day' && hasLetter()) {
+      throw new Error([`MUI: The token "${format}" is a digit format with letter in it.'
+             This type of format is only supported for 'day' sections`].join('\n'));
+    }
+  }
+  if (sectionType === 'day' && hasLetter()) {
+    const date = utils.setDate(sectionBoundaries.longestMonth, value);
+    return utils.formatByString(date, format);
+  }
+
+  // queryValue without leading `0` (`01` => `1`)
+  const valueStr = value.toString();
+  if (hasLeadingZeros) {
+    const size = utils.formatByString(utils.date(), format).length;
+    let cleanValueStr = valueStr;
+
+    // Remove the leading zeros
+    cleanValueStr = Number(cleanValueStr).toString();
+
+    // Add enough leading zeros to fill the section
+    while (cleanValueStr.length < size) {
+      cleanValueStr = `0${cleanValueStr}`;
+    }
+    return cleanValueStr;
+  }
+  return valueStr;
+};
 export const adjustSectionValue = (utils, section, keyCode, sectionsValueBoundaries, activeDate) => {
   const delta = getDeltaFromKeyCode(keyCode);
   const isStart = keyCode === 'Home';
   const isEnd = keyCode === 'End';
   const shouldSetAbsolute = section.value === '' || isStart || isEnd;
-  const cleanDigitSectionValue = value => {
-    const valueStr = value.toString();
-    if (section.hasLeadingZeros) {
-      return cleanLeadingZerosInNumericSectionValue(utils, section.format, valueStr);
-    }
-    return valueStr;
-  };
   const adjustDigitSection = () => {
     const sectionBoundaries = sectionsValueBoundaries[section.type]({
       currentDate: activeDate,
       format: section.format,
       contentType: section.contentType
     });
+    const getCleanValue = value => cleanDigitSectionValue(utils, value, section.type, section.format, section.hasLeadingZeros, sectionBoundaries);
     if (shouldSetAbsolute) {
       if (section.type === 'year' && !isEnd && !isStart) {
         return utils.formatByString(utils.date(), section.format);
       }
       if (delta > 0 || isStart) {
-        return cleanDigitSectionValue(sectionBoundaries.minimum);
+        return getCleanValue(sectionBoundaries.minimum);
       }
-      return cleanDigitSectionValue(sectionBoundaries.maximum);
+      return getCleanValue(sectionBoundaries.maximum);
     }
-    const currentSectionValue = Number(section.value);
+    const currentSectionValue = parseInt(section.value, 10);
     const newSectionValueNumber = currentSectionValue + delta;
     if (newSectionValueNumber > sectionBoundaries.maximum) {
-      return cleanDigitSectionValue(sectionBoundaries.minimum);
+      return getCleanValue(sectionBoundaries.minimum);
     }
     if (newSectionValueNumber < sectionBoundaries.minimum) {
-      return cleanDigitSectionValue(sectionBoundaries.maximum);
+      return getCleanValue(sectionBoundaries.maximum);
     }
-    return cleanDigitSectionValue(newSectionValueNumber);
+    return getCleanValue(newSectionValueNumber);
   };
   const adjustLetterSection = () => {
     const options = getLetterEditingOptions(utils, section.type, section.format);
@@ -233,7 +248,7 @@ export const changeSectionValueFormat = (utils, valueStr, currentFormat, newForm
   return utils.formatByString(utils.parse(valueStr, currentFormat), newFormat);
 };
 const isFourDigitYearFormat = (utils, format) => utils.formatByString(utils.date(), format).length === 4;
-export const doesSectionHaveTrailingZeros = (utils, contentType, sectionType, format) => {
+export const doesSectionHaveLeadingZeros = (utils, contentType, sectionType, format) => {
   if (contentType !== 'digit') {
     return false;
   }
@@ -307,13 +322,13 @@ export const splitFormatIntoSections = (utils, localeText, format, date) => {
       return expandedToken;
     }
     const sectionConfig = getDateSectionConfigFromFormatToken(utils, token);
-    const sectionValue = date == null ? '' : utils.formatByString(date, token);
-    const hasTrailingZeroes = doesSectionHaveTrailingZeros(utils, sectionConfig.contentType, sectionConfig.type, token);
+    const sectionValue = date == null || !utils.isValid(date) ? '' : utils.formatByString(date, token);
+    const hasLeadingZeros = doesSectionHaveLeadingZeros(utils, sectionConfig.contentType, sectionConfig.type, token);
     sections.push(_extends({}, sectionConfig, {
       format: token,
       value: sectionValue,
       placeholder: getSectionPlaceholder(utils, localeText, sectionConfig, token),
-      hasLeadingZeros: hasTrailingZeroes,
+      hasLeadingZeros,
       startSeparator: sections.length === 0 ? startSeparator : '',
       endSeparator: '',
       modified: false
@@ -406,10 +421,22 @@ export const createDateStrForInputFromSections = sections => {
 export const getSectionsBoundaries = utils => {
   const today = utils.date();
   const endOfYear = utils.endOfYear(today);
-  const maxDaysInMonth = utils.getMonthArray(today).reduce((acc, month) => {
+  const {
+    maxDaysInMonth,
+    longestMonth
+  } = utils.getMonthArray(today).reduce((acc, month) => {
     const daysInMonth = utils.getDaysInMonth(month);
-    return Math.max(acc, daysInMonth);
-  }, 0);
+    if (daysInMonth > acc.maxDaysInMonth) {
+      return {
+        maxDaysInMonth: daysInMonth,
+        longestMonth: month
+      };
+    }
+    return acc;
+  }, {
+    maxDaysInMonth: 0,
+    longestMonth: null
+  });
   return {
     year: ({
       format
@@ -426,7 +453,8 @@ export const getSectionsBoundaries = utils => {
       currentDate
     }) => ({
       minimum: 1,
-      maximum: currentDate != null && utils.isValid(currentDate) ? utils.getDaysInMonth(currentDate) : maxDaysInMonth
+      maximum: currentDate != null && utils.isValid(currentDate) ? utils.getDaysInMonth(currentDate) : maxDaysInMonth,
+      longestMonth: longestMonth
     }),
     weekDay: ({
       format,
@@ -567,7 +595,7 @@ export const clampDaySection = (utils, sections, sectionsValueBoundaries) => {
       contentType: section.contentType
     });
     return _extends({}, section, {
-      value: section.hasLeadingZeros ? cleanLeadingZerosInNumericSectionValue(utils, section.format, dayBoundaries.minimum.toString()) : dayBoundaries.minimum.toString()
+      value: cleanDigitSectionValue(utils, dayBoundaries.minimum, section.type, section.format, section.hasLeadingZeros, dayBoundaries)
     });
   });
   const startOfMonth = getDateFromDateSections(utils, sectionsForStartOfMonth);

package/internals/hooks/useField/useFieldCharacterEditing.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useUtils } from '../useUtils';
-import { changeSectionValueFormat, cleanLeadingZerosInNumericSectionValue, doesSectionHaveTrailingZeros, getDateSectionConfigFromFormatToken, getDaysInWeekStr, getLetterEditingOptions } from './useField.utils';
+import { changeSectionValueFormat, cleanDigitSectionValue, doesSectionHaveLeadingZeros, getDateSectionConfigFromFormatToken, getDaysInWeekStr, getLetterEditingOptions } from './useField.utils';
 const QUERY_LIFE_DURATION_MS = 5000;
 const isQueryResponseWithoutValue = response => response.saveQuery != null;
 
@@ -138,7 +138,7 @@ export const useFieldCharacterEditing = ({
     return applyQuery(params, getFirstSectionValueMatchingWithQuery);
   };
   const applyNumericEditing = params => {
-    const getNewSectionValue = (queryValue, sectionType, format, hasTrailingZeroes, contentType) => {
+    const getNewSectionValue = (queryValue, sectionType, format, hasLeadingZeros, contentType) => {
       const queryValueNumber = Number(`${queryValue}`);
       const sectionBoundaries = sectionsValueBoundaries[sectionType]({
         currentDate: null,
@@ -160,12 +160,7 @@ export const useFieldCharacterEditing = ({
         };
       }
       const shouldGoToNextSection = Number(`${queryValue}0`) > sectionBoundaries.maximum || queryValue.length === sectionBoundaries.maximum.toString().length;
-
-      // queryValue without leading `0` (`01` => `1`)
-      let newSectionValue = queryValueNumber.toString();
-      if (hasTrailingZeroes) {
-        newSectionValue = cleanLeadingZerosInNumericSectionValue(utils, format, newSectionValue);
-      }
+      const newSectionValue = cleanDigitSectionValue(utils, queryValueNumber, sectionType, format, hasLeadingZeros, sectionBoundaries);
       return {
         sectionValue: newSectionValue,
         shouldGoToNextSection
@@ -179,7 +174,7 @@ export const useFieldCharacterEditing = ({
       // When editing a letter-format month and the user presses a digit,
       // We can support the numeric editing by using the digit-format month and re-formatting the result.
       if (activeSection.type === 'month') {
-        const response = getNewSectionValue(queryValue, activeSection.type, 'MM', doesSectionHaveTrailingZeros(utils, 'digit', 'month', 'MM'), 'digit');
+        const response = getNewSectionValue(queryValue, activeSection.type, 'MM', doesSectionHaveLeadingZeros(utils, 'digit', 'month', 'MM'), 'digit');
         if (isQueryResponseWithoutValue(response)) {
           return response;
         }

package/internals/hooks/useField/useFieldState.d.ts

@@ -13,7 +13,7 @@ export interface UpdateSectionValueParams<TSection extends FieldSection> {
      */
     shouldGoToNextSection: boolean;
 }
-export declare const useFieldState: <TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any>>(params: UseFieldParams<TValue, TDate, TSection, TForwardedProps, TInternalProps>) => {
+export declare const useFieldState: <TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any>>(params: UseFieldParams<TValue, TDate, TSection, TForwardedProps, TInternalProps>) => {
     state: UseFieldState<TValue, TSection>;
     selectedSectionIndexes: FieldSelectedSectionsIndexes | null;
     setSelectedSections: (newSelectedSections: FieldSelectedSections) => void;
@@ -22,6 +22,5 @@ export declare const useFieldState: <TValue, TDate, TSection extends FieldSectio
     updateSectionValue: ({ activeSection, newSectionValue, shouldGoToNextSection, }: UpdateSectionValueParams<TSection>) => void;
     updateValueFromValueStr: (valueStr: string) => void;
     setTempAndroidValueStr: (tempValueStrAndroid: string | null) => void;
-    sectionOrder: import("./useField.types").SectionOrdering;
     sectionsValueBoundaries: import("./useField.types").FieldSectionsValueBoundaries<TDate>;
 };