@mui/x-date-pickers 6.0.1 → 6.0.2

package/AdapterDateFns/index.js

@@ -31,6 +31,7 @@ const formatTokenMap = {
   // Day of the month
   d: 'day',
   dd: 'day',
+  do: 'day',
   // Day of the week
   E: {
     sectionType: 'weekDay',

package/AdapterDayjs/index.js

@@ -22,6 +22,7 @@ const formatTokenMap = {
   // Day of the month
   D: 'day',
   DD: 'day',
+  Do: 'day',
   // Day of the week
   d: 'weekDay',
   dd: {

package/AdapterMoment/index.js

@@ -21,6 +21,7 @@ const formatTokenMap = {
   // Day of the month
   D: 'day',
   DD: 'day',
+  Do: 'day',
   // Day of the week
   E: 'weekDay',
   e: 'weekDay',

package/AdapterMomentHijri/index.d.ts

@@ -14,5 +14,5 @@ export declare class AdapterMomentHijri extends BaseAdapterMomentHijri implement
      */
     expandFormat: (format: string) => string;
     getFormatHelperText: (format: string) => string;
-    getWeekNumber: (date: defaultMoment.Moment) => any;
+    getWeekNumber: (date: defaultMoment.Moment) => number;
 }

package/CHANGELOG.md

@@ -3,6 +3,59 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.2
+
+_Mar 16, 2023_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Fire `onChange` when filling a partial date (#8082) @flaviendelangle
+- 🎁 Support date format like `1st` (`do`) (#8188) @flaviendelangle
+- 🌍 Add Hebrew (he-IL) locale (#8222) @ylarom
+- 🌍 Improve Brazilian Portuguese (pt-BR), German (de-DE), and French (fr-FR) locales
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.2` / `@mui/x-data-grid-pro@v6.0.2` / `@mui/x-data-grid-premium@v6.0.2`
+
+#### Changes
+
+- [DataGrid] Fix <kbd>Space</kbd> triggering edit mode (#8180) @m4theushw
+- [DataGrid] Remove warning when adding a custom column type (#8227) @m4theushw
+- [l10n] Improve Brazilian Portuguese (pt-BR) locale (#8198) @JoaoSerafim3001
+
+### `@mui/x-date-pickers@v6.0.2` / `@mui/x-date-pickers-pro@v6.0.2`
+
+#### Changes
+
+- [l10n] Add Hebrew (he-IL) locale (#8222) @ylarom
+- [l10n] Improve German (de-DE) locale (#8204) @sebkasanzew
+- [l10n] Improve French (fr-FR) locale (#8229) @marvinroger
+- [DateRangePicker] Allow overriding `slotProps.textField` (#8201) @LukasTy
+- [fields] Fire `onChange` when filling a partial date (#8082) @flaviendelangle
+- [fields] Fix editing in shadow dom (#8254) @flaviendelangle
+- [fields] Remove the duplicated warning about invalid adapter (#8187) @flaviendelangle
+- [fields] Support date format like `1st` (`do`) (#8188) @flaviendelangle
+- [pickers] Fix to avoid selecting sections on mobile picker field (#8228) @LukasTy
+- [pickers] Inherit previous and next icons size from their parent button (#8218) @flaviendelangle
+
+### Docs
+
+- [docs] Add a warning in the migration guide for people re-enabling the clock on desktop (#8184) @flaviendelangle
+- [docs] Add a warning for `luxon` macro tokens (#8245) @flaviendelangle
+- [docs] Complete pickers customization pages (#8066) @alexfauquette
+- [docs] Fix 301 redirection @oliviertassinari
+- [docs] Fix 404 links to customization Material UI APIs (#8200) @oliviertassinari
+- [docs] Fix `moment-hijri` demo (#8255) @LukasTy
+- [docs] Improve migration diff (#8240) @oliviertassinari
+- [docs] Change **What's new** page url to point to announcement blog post (#8186) @joserodolfofreitas
+- [docs] Resolve 301 in changelog @oliviertassinari
+
+### Core
+
+- [core] Regen api docs (#8220) @flaviendelangle
+- [core] Remove duplicated `/` (#8223) @alexfauquette
+
 ## 6.0.1
 
 _Mar 9, 2023_
@@ -1025,7 +1078,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
   <DataGridPremium unstable_cellSelection />
   ```
 
-  See [the documentation](https://mui.com/x/react-data-grid/selection/#cell-selection) for more information
+  See [the documentation](https://mui.com/x/react-data-grid/cell-selection/) for more information
 
 - 🌍 Support the Right To Left orientation on the fields components
 - 📚 Documentation improvements
@@ -3082,7 +3135,7 @@ _Sep 2, 2022_
 
 🎉 We are excited to finally introduce a stable release (v5.0.0) for the `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` packages!
 
-If you are still using picker components from the `lab`, take a look at the [migration guide](https://mui.com/x/react-date-pickers/migration-lab/).
+If you are still using picker components from the `lab`, take a look at the [migration guide](https://mui.com/x/migration/migration-pickers-lab/).
 
 We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
 
@@ -4133,7 +4186,7 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss
 
   Date and time picker components have been moved to the MUI X repository.
   They are now accessible in their own packages: `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`.
-  For more information, you can read the [blog article](https://mui.com/blog/lab-date-pickers-to-mui-x/) and the [migration guide](https://mui.com/x/react-date-pickers/migration-lab/).
+  For more information, you can read the [blog article](https://mui.com/blog/lab-date-pickers-to-mui-x/) and the [migration guide](https://mui.com/x/migration/migration-pickers-lab/).
 
 - 📝 Add `onProcessRowUpdateError` prop to simplify error management in edit mode (#4267) @m4theushw
 - ✨ Add generic typing to `GridColDef` and derived interfaces (#4064) @flaviendelangle
@@ -6781,7 +6834,7 @@ Big thanks to the 11 contributors who made this release possible. Here are some
 - 💅 Add `columnHeader`, `row` and `cell` to the `classes` prop (#1660) @DanailH
 - ✅ Add the `isRowSelectable` prop to disable selection on certain rows (#1659) @m4theushw
 
-  See the documentation for [more details](https://mui.com/x/react-data-grid/selection/#disable-selection-on-certain-rows).
+  See the documentation for [more details](https://v4.mui.com/components/data-grid/selection/#disable-selection-on-certain-rows).
 
 - ⚡️ Add new icon slot to be displayed when the column is unsorted (#1415) @m4theushw
 - ⚙ Improve consistency of the API to prepare for the first beta release
@@ -7309,7 +7362,7 @@ Big thanks to the 4 contributors who made this release possible. Here are some h
 - 📍 Add support for default locales (#983) @DanailH
   We have built the infrastructure to support around 100 [default locales](https://mui.com/x/react-data-grid/localization/#supported-locales). If you have localized the data grid in your application. Please do consider contributing new translations back to Material UI by opening a pull request.
 - 🎁 Add new `selectionModel` prop (#986) @dtassone
-  The prop can be used to control the selected rows in the data grid. [See the docs](https://mui.com/x/react-data-grid/selection/#controlled-selection).
+  The prop can be used to control the selected rows in the data grid. [See the docs](https://v4.mui.com/components/data-grid/selection/#controlled-selection).
 - 💅 Add support for default props from theme (#1019) @DanailH
 - 🙌 Fix scrollbar size on windows (#1061) @dtassone
 - 🐛 Polish existing features, fix 9 issues.

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.0.1
+ * @mui/x-date-pickers v6.0.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -95,7 +95,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
     elementType: PreviousIconButton,
     externalSlotProps: (_slotProps$previousIc = slotProps == null ? void 0 : slotProps.previousIconButton) != null ? _slotProps$previousIc : componentsProps == null ? void 0 : componentsProps.previousIconButton,
     additionalProps: {
-      size: 'small',
+      size: 'medium',
       title: leftProps.label,
       'aria-label': leftProps.label,
       disabled: leftProps.isDisabled,
@@ -112,7 +112,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
     elementType: NextIconButton,
     externalSlotProps: (_slotProps$nextIconBu = slotProps == null ? void 0 : slotProps.nextIconButton) != null ? _slotProps$nextIconBu : componentsProps == null ? void 0 : componentsProps.nextIconButton,
     additionalProps: {
-      size: 'small',
+      size: 'medium',
       title: rightProps.label,
       'aria-label': rightProps.label,
       disabled: rightProps.isDisabled,
@@ -129,6 +129,9 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
   const _useSlotProps = useSlotProps({
       elementType: LeftArrowIcon,
       externalSlotProps: (_slotProps$leftArrowI = slotProps == null ? void 0 : slotProps.leftArrowIcon) != null ? _slotProps$leftArrowI : componentsProps == null ? void 0 : componentsProps.leftArrowIcon,
+      additionalProps: {
+        fontSize: 'inherit'
+      },
       ownerState: undefined
     }),
     leftArrowIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
@@ -137,6 +140,9 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
   const _useSlotProps2 = useSlotProps({
       elementType: RightArrowIcon,
       externalSlotProps: (_slotProps$rightArrow = slotProps == null ? void 0 : slotProps.rightArrowIcon) != null ? _slotProps$rightArrow : componentsProps == null ? void 0 : componentsProps.rightArrowIcon,
+      additionalProps: {
+        fontSize: 'inherit'
+      },
       ownerState: undefined
     }),
     rightArrowIconProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded3);

package/internals/components/PickersModalDialog.d.ts

@@ -16,7 +16,7 @@ export interface PickersModalDialogSlotsComponent {
      */
     MobilePaper?: React.JSXElementConstructor<MuiPaperProps>;
     /**
-     * Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions).
+     * Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/).
      * @default Fade from @mui/material
      */
     MobileTransition?: React.JSXElementConstructor<MuiTransitionProps>;
@@ -31,7 +31,7 @@ export interface PickersModalDialogSlotsComponentsProps {
      */
     mobilePaper?: Partial<MuiPaperProps>;
     /**
-     * Props passed down to the mobile [Transition](https://mui.com/material-ui/transitions) component.
+     * Props passed down to the mobile [Transition](https://mui.com/material-ui/transitions/) component.
      */
     mobileTransition?: Partial<MuiTransitionProps>;
 }

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/useField/useField.js

@@ -10,11 +10,9 @@ import { useUtils } from '../useUtils';
 import { adjustSectionValue, isAndroid, cleanString } 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,
@@ -61,6 +59,10 @@ export const useField = params => {
   const focusTimeoutRef = React.useRef(undefined);
   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 +89,7 @@ export const useField = params => {
       if (!input || input !== inputRef.current) {
         return;
       }
-      if (selectedSectionIndexes != null) {
+      if (selectedSectionIndexes != null || readOnly) {
         return;
       }
       if (
@@ -258,6 +260,10 @@ 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);
+      }
       return;
     }
     const firstSelectedSection = state.sections[selectedSectionIndexes.startIndex];
@@ -315,7 +321,7 @@ export const useField = params => {
     }
     return 'tel';
   }, [selectedSectionIndexes, state.sections]);
-  const inputHasFocus = inputRef.current && inputRef.current === document.activeElement;
+  const inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document);
   const shouldShowPlaceholder = !inputHasFocus && (!state.value || valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue));
   return _extends({
     placeholder: state.placeholder,

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

@@ -152,14 +152,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 +210,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

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;
         }