@mui/x-date-pickers 7.0.0-beta.2 → 7.0.0-beta.5

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

@@ -1,8 +1,12 @@
 import * as React from 'react';
-import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, FieldValueType, PickersTimezone, PickerValidDate } from '../../../models';
+import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, FieldValueType, PickersTimezone, PickerValidDate, FieldRef } from '../../../models';
 import type { PickerValueManager } from '../usePicker';
 import { InferError, Validator } from '../useValidation';
-export interface UseFieldParams<TValue, TDate extends PickerValidDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any, any>> {
+import type { UseFieldStateResponse } from './useFieldState';
+import type { UseFieldCharacterEditingResponse } from './useFieldCharacterEditing';
+import { PickersSectionElement, PickersSectionListRef } from '../../../PickersSectionList';
+import { ExportedUseClearableFieldProps } from '../../../hooks/useClearableField';
+export interface UseFieldParams<TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<any, any, any, TEnableAccessibleFieldDOMStructure, any>> {
     forwardedProps: TForwardedProps;
     internalProps: TInternalProps;
     valueManager: PickerValueManager<TValue, TDate, InferError<TInternalProps>>;
@@ -10,7 +14,7 @@ export interface UseFieldParams<TValue, TDate extends PickerValidDate, TSection
     validator: Validator<TValue, TDate, InferError<TInternalProps>, UseFieldValidationProps<TValue, TInternalProps>>;
     valueType: FieldValueType;
 }
-export interface UseFieldInternalProps<TValue, TDate extends PickerValidDate, TSection extends FieldSection, TError> extends TimezoneProps {
+export interface UseFieldInternalProps<TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends TimezoneProps {
     /**
      * The selected value.
      * Used when the component is controlled.
@@ -75,11 +79,11 @@ export interface UseFieldInternalProps<TValue, TDate extends PickerValidDate, TS
     readOnly?: boolean;
     /**
      * The currently selected sections.
-     * This prop accept four formats:
+     * This prop accepts four formats:
      * 1. If a number is provided, the section at this index will be selected.
-     * 2. If an object with a `startIndex` and `endIndex` properties are provided, the sections between those two indexes will be selected.
-     * 3. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
-     * 4. If `null` is provided, no section will be selected
+     * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+     * 3. If `"all"` is provided, all the sections will be selected.
+     * 4. If `null` is provided, no section will be selected.
      * If not provided, the selected sections will be handled internally.
      */
     selectedSections?: FieldSelectedSections;
@@ -93,60 +97,59 @@ export interface UseFieldInternalProps<TValue, TDate extends PickerValidDate, TS
      */
     unstableFieldRef?: React.Ref<FieldRef<TSection>>;
     /**
-     * Callback fired when the clear button is clicked.
+     * @default false
      */
-    onClear?: React.MouseEventHandler;
+    enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
     /**
-     * If `true`, a clear button will be shown in the field allowing value clearing.
+     * If `true`, the `input` element is focused during the first mount.
      * @default false
      */
-    clearable?: boolean;
+    autoFocus?: boolean;
     /**
      * If `true`, the component is disabled.
      * @default false
      */
     disabled?: boolean;
 }
-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 UseFieldCommonAdditionalProps extends Required<Pick<UseFieldInternalProps<any, any, any, any, any>, 'disabled' | 'readOnly'>> {
 }
-export interface UseFieldForwardedProps {
-    inputRef?: React.Ref<HTMLInputElement>;
+export interface UseFieldCommonForwardedProps extends ExportedUseClearableFieldProps {
     onKeyDown?: React.KeyboardEventHandler;
-    onMouseUp?: React.MouseEventHandler;
-    onPaste?: React.ClipboardEventHandler<HTMLInputElement>;
+    error?: boolean;
+}
+export type UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure extends boolean> = UseFieldCommonForwardedProps & (TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps);
+export interface UseFieldV6ForwardedProps {
+    inputRef?: React.Ref<HTMLInputElement>;
+    onBlur?: () => void;
     onClick?: React.MouseEventHandler;
     onFocus?: () => void;
+    onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
+}
+interface UseFieldV6AdditionalProps extends Required<Pick<React.InputHTMLAttributes<HTMLInputElement>, 'inputMode' | 'placeholder' | 'value' | 'onChange' | 'autoComplete'>> {
+    enableAccessibleFieldDOMStructure: false;
+}
+export interface UseFieldV7ForwardedProps {
+    focused?: boolean;
+    autoFocus?: boolean;
+    sectionListRef?: React.Ref<PickersSectionListRef>;
     onBlur?: () => void;
-    error?: boolean;
-    onClear?: React.MouseEventHandler;
-    clearable?: boolean;
-    disabled?: boolean;
+    onClick?: React.MouseEventHandler;
+    onFocus?: () => void;
+    onInput?: React.FormEventHandler<HTMLDivElement>;
+    onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
 }
-export type UseFieldResponse<TForwardedProps extends UseFieldForwardedProps> = Omit<TForwardedProps, keyof UseFieldForwardedProps> & Required<UseFieldForwardedProps> & Pick<React.InputHTMLAttributes<HTMLInputElement>, 'autoCorrect' | 'inputMode' | 'placeholder'> & {
-    inputRef: React.Ref<HTMLInputElement>;
+interface UseFieldV7AdditionalProps {
+    enableAccessibleFieldDOMStructure: true;
+    elements: PickersSectionElement[];
+    tabIndex: number | undefined;
+    contentEditable: boolean;
     value: string;
     onChange: React.ChangeEventHandler<HTMLInputElement>;
-    error: boolean;
-    readOnly: boolean;
-    autoComplete: 'off';
-};
-export type FieldSectionWithoutPosition<TSection extends FieldSection = FieldSection> = Omit<TSection, 'start' | 'end' | 'startInInput' | 'endInInput'>;
+    areAllSectionsEmpty: boolean;
+}
+export type UseFieldResponse<TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & {
+    [key: string]: any;
+}> = Omit<TForwardedProps, keyof UseFieldCommonForwardedProps> & Required<UseFieldCommonForwardedProps> & UseFieldCommonAdditionalProps & (TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6AdditionalProps & Required<UseFieldV6ForwardedProps> : UseFieldV7AdditionalProps & Required<UseFieldV7ForwardedProps>);
 export type FieldSectionValueBoundaries<TDate extends PickerValidDate, SectionType extends FieldSectionType> = {
     minimum: number;
     maximum: number;
@@ -160,6 +163,12 @@ export type FieldSectionsValueBoundaries<TDate extends PickerValidDate> = {
         contentType: FieldSectionContentType;
     }) => FieldSectionValueBoundaries<TDate, SectionType>;
 };
+export type FieldSectionsBoundaries = {
+    [SectionType in FieldSectionType]: {
+        minimum: number;
+        maximum: number;
+    };
+};
 export type FieldChangeHandler<TValue, TError> = (value: TValue, context: FieldChangeHandlerContext<TError>) => void;
 export interface FieldChangeHandlerContext<TError> {
     validationError: TError;
@@ -192,14 +201,7 @@ interface FieldActiveDateManager<TValue, TDate extends PickerValidDate, TSection
      */
     getNewValuesFromNewActiveDate: (newActiveDate: TDate | null) => Pick<UseFieldState<TValue, any>, 'value' | 'referenceValue'>;
 }
-export type FieldSelectedSectionsIndexes = {
-    startIndex: number;
-    endIndex: number;
-    /**
-     * If `true`, the selectors at the very beginning and very end of the input will be selected.
-     */
-    shouldSelectBoundarySelectors: boolean;
-};
+export type FieldParsedSelectedSections = number | 'all' | null;
 export interface FieldValueManager<TValue, TDate extends PickerValidDate, TSection extends FieldSection> {
     /**
      * Creates the section list from the current value.
@@ -208,12 +210,10 @@ export interface FieldValueManager<TValue, TDate extends PickerValidDate, TSecti
      * @param {MuiPickersAdapter<TDate>} utils The utils to manipulate the date.
      * @param {TValue} value The current value to generate sections from.
      * @param {TSection[] | null} fallbackSections The sections to use as a fallback if a date is null or invalid.
-     * @param {string} localizedDigits The conversion table from localized to 0-9 digits.
-     * @param {boolean} isRTL `true` if the direction is "right to left".
-     * @param {(date: TDate) => FieldSectionWithoutPosition[]} getSectionsFromDate Returns the sections of the given date.
+     * @param {(date: TDate) => FieldSection[]} getSectionsFromDate Returns the sections of the given date.
      * @returns {TSection[]}  The new section list.
      */
-    getSectionsFromValue: (utils: MuiPickersAdapter<TDate>, value: TValue, fallbackSections: TSection[] | null, localizedDigits: string[], isRTL: boolean, getSectionsFromDate: (date: TDate) => FieldSectionWithoutPosition[]) => TSection[];
+    getSectionsFromValue: (utils: MuiPickersAdapter<TDate>, value: TValue, fallbackSections: TSection[] | null, getSectionsFromDate: (date: TDate) => FieldSection[]) => TSection[];
     /**
      * Creates the string value to render in the input based on the current section list.
      * @template TSection
@@ -222,7 +222,14 @@ export interface FieldValueManager<TValue, TDate extends PickerValidDate, TSecti
      * @param {boolean} isRTL `true` if the current orientation is "right to left"
      * @returns {string} The string value to render in the input.
      */
-    getValueStrFromSections: (sections: TSection[], localizedDigits: string[], isRTL: boolean) => string;
+    getV6InputValueFromSections: (sections: TSection[], localizedDigits: string[], isRTL: boolean) => string;
+    /**
+     * Creates the string value to render in the input based on the current section list.
+     * @template TSection
+     * @param {TSection[]} sections The current section list.
+     * @returns {string} The string value to render in the input.
+     */
+    getV7HiddenInputValueFromSections: (sections: TSection[]) => string;
     /**
      * Returns the manager of the active date.
      * @template TValue, TDate, TSection
@@ -316,4 +323,33 @@ export type SectionOrdering = {
      */
     endIndex: number;
 };
+export interface UseFieldTextFieldInteractions {
+    /**
+     * Select the correct sections in the DOM according to the sections currently selected in state.
+     */
+    syncSelectionToDOM: () => void;
+    /**
+     * 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.
+     */
+    getActiveSectionIndexFromDOM: () => number | null;
+    /**
+     * Focuses the field.
+     * @param {number | FieldSectionType} newSelectedSection The section to select once focused.
+     */
+    focusField: (newSelectedSection?: number | FieldSectionType) => void;
+    setSelectedSections: (newSelectedSections: FieldSelectedSections) => void;
+    isFieldFocused: () => boolean;
+}
+export type UseFieldTextField<TEnableAccessibleFieldDOMStructure extends boolean> = <TValue, TDate extends PickerValidDate, TSection extends FieldSection, TForwardedProps extends TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any, TEnableAccessibleFieldDOMStructure, any> & {
+    minutesStep?: number;
+}>(params: UseFieldTextFieldParams<TValue, TDate, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => {
+    interactions: UseFieldTextFieldInteractions;
+    returnedValue: TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6AdditionalProps & Required<UseFieldV6ForwardedProps> : UseFieldV7AdditionalProps & Required<UseFieldV7ForwardedProps>;
+};
+interface UseFieldTextFieldParams<TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any, TEnableAccessibleFieldDOMStructure, any>> extends UseFieldParams<TValue, TDate, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>, UseFieldStateResponse<TValue, TDate, TSection>, UseFieldCharacterEditingResponse {
+    areAllSectionsEmpty: boolean;
+    sectionOrder: SectionOrdering;
+}
 export {};

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

@@ -1,6 +1,5 @@
-import { AvailableAdjustKeyCode, FieldSectionsValueBoundaries, SectionOrdering, FieldSectionWithoutPosition, FieldSectionValueBoundaries } from './useField.types';
-import { FieldSectionType, FieldValueType, FieldSection, MuiPickersAdapter, FieldSectionContentType, PickersTimezone, PickerValidDate } from '../../../models';
-import { PickersLocaleText } from '../../../locales/utils/pickersLocaleTextApi';
+import { AvailableAdjustKeyCode, FieldSectionsValueBoundaries, SectionOrdering, FieldSectionValueBoundaries, FieldParsedSelectedSections } from './useField.types';
+import { FieldSectionType, FieldValueType, FieldSection, MuiPickersAdapter, FieldSectionContentType, PickersTimezone, PickerValidDate, FieldSelectedSections } from '../../../models';
 export declare const getDateSectionConfigFromFormatToken: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate, any>, formatToken: string) => Pick<FieldSection, 'type' | 'contentType'> & {
     maxLength: number | undefined;
 };
@@ -21,20 +20,21 @@ export declare const cleanDigitSectionValue: <TDate extends PickerValidDate>(uti
 export declare const adjustSectionValue: <TDate extends PickerValidDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, section: TSection, keyCode: AvailableAdjustKeyCode, sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>, localizedDigits: string[], activeDate: TDate | null, stepsAttributes?: {
     minutesStep?: number;
 }) => string;
-export declare const getSectionVisibleValue: (section: FieldSectionWithoutPosition, target: 'input-rtl' | 'input-ltr' | 'non-input', localizedDigits: string[]) => string;
-export declare const cleanString: (dirtyString: string) => string;
-export declare const addPositionPropertiesToSections: <TSection extends FieldSection>(sections: FieldSectionWithoutPosition<TSection>[], localizedDigits: string[], isRTL: boolean) => TSection[];
+export declare const getSectionVisibleValue: (section: FieldSection, target: 'input-rtl' | 'input-ltr' | 'non-input', localizedDigits: string[]) => string;
 export declare const changeSectionValueFormat: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate, any>, valueStr: string, currentFormat: string, newFormat: string) => string;
 export declare const doesSectionFormatHaveLeadingZeros: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, contentType: FieldSectionContentType, sectionType: FieldSectionType, format: string) => boolean;
-export declare const splitFormatIntoSections: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, localeText: PickersLocaleText<TDate>, localizedDigits: string[], format: string, date: TDate | null, formatDensity: 'dense' | 'spacious', shouldRespectLeadingZeros: boolean, isRTL: boolean) => FieldSectionWithoutPosition[];
 /**
  * Some date libraries like `dayjs` don't support parsing from date with escaped characters.
  * To make sure that the parsing works, we are building a format and a date without any separator.
  */
 export declare const getDateFromDateSections: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate, any>, sections: FieldSection[], localizedDigits: string[]) => TDate;
-export declare const createDateStrForInputFromSections: (sections: FieldSection[], localizedDigits: string[], isRTL: boolean) => string;
+export declare const createDateStrForV7HiddenInputFromSections: (sections: FieldSection[]) => string;
+export declare const createDateStrForV6InputFromSections: (sections: FieldSection[], localizedDigits: string[], isRTL: boolean) => string;
 export declare const getSectionsBoundaries: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate, any>, localizedDigits: string[], timezone: PickersTimezone) => FieldSectionsValueBoundaries<TDate>;
 export declare const validateSections: <TSection extends FieldSection>(sections: TSection[], valueType: FieldValueType) => void;
-export declare const mergeDateIntoReferenceDate: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, dateToTransferFrom: TDate, sections: FieldSectionWithoutPosition[], referenceDate: TDate, shouldLimitToEditedSections: boolean) => TDate;
+export declare const mergeDateIntoReferenceDate: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, dateToTransferFrom: TDate, sections: FieldSection[], referenceDate: TDate, shouldLimitToEditedSections: boolean) => TDate;
 export declare const isAndroid: () => boolean;
-export declare const getSectionOrder: (sections: FieldSectionWithoutPosition[], isRTL: boolean) => SectionOrdering;
+export declare const getSectionOrder: (sections: FieldSection[], shouldApplyRTL: boolean) => SectionOrdering;
+export declare const parseSelectedSections: (selectedSections: FieldSelectedSections, sections: FieldSection[]) => FieldParsedSelectedSections;
+export declare const getSectionValueText: <TDate extends PickerValidDate>(section: FieldSection, utils: MuiPickersAdapter<TDate, any>) => string | undefined;
+export declare const getSectionValueNow: <TDate extends PickerValidDate>(section: FieldSection, utils: MuiPickersAdapter<TDate, any>) => number | undefined;

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { getMonthsInYear } from '../../utils/date-utils';
 export const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
   const config = utils.formatTokenMap[formatToken];
@@ -225,93 +224,6 @@ export const getSectionVisibleValue = (section, target, localizedDigits) => {
   }
   return value;
 };
-export const cleanString = dirtyString => dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
-export const addPositionPropertiesToSections = (sections, localizedDigits, isRTL) => {
-  let position = 0;
-  let positionInInput = isRTL ? 1 : 0;
-  const newSections = [];
-  for (let i = 0; i < sections.length; i += 1) {
-    const section = sections[i];
-    const renderedValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr', localizedDigits);
-    const sectionStr = `${section.startSeparator}${renderedValue}${section.endSeparator}`;
-    const sectionLength = cleanString(sectionStr).length;
-    const sectionLengthInInput = sectionStr.length;
-
-    // The ...InInput values consider the unicode characters but do include them in their indexes
-    const cleanedValue = cleanString(renderedValue);
-    const startInInput = positionInInput + (cleanedValue === '' ? 0 : renderedValue.indexOf(cleanedValue[0])) + section.startSeparator.length;
-    const endInInput = startInInput + cleanedValue.length;
-    newSections.push(_extends({}, section, {
-      start: position,
-      end: position + sectionLength,
-      startInInput,
-      endInInput
-    }));
-    position += sectionLength;
-    // Move position to the end of string associated to the current section
-    positionInInput += sectionLengthInInput;
-  }
-  return newSections;
-};
-const getSectionPlaceholder = (utils, timezone, localeText, sectionConfig, sectionFormat) => {
-  switch (sectionConfig.type) {
-    case 'year':
-      {
-        return localeText.fieldYearPlaceholder({
-          digitAmount: utils.formatByString(utils.date(undefined, timezone), sectionFormat).length,
-          format: sectionFormat
-        });
-      }
-    case 'month':
-      {
-        return localeText.fieldMonthPlaceholder({
-          contentType: sectionConfig.contentType,
-          format: sectionFormat
-        });
-      }
-    case 'day':
-      {
-        return localeText.fieldDayPlaceholder({
-          format: sectionFormat
-        });
-      }
-    case 'weekDay':
-      {
-        return localeText.fieldWeekDayPlaceholder({
-          contentType: sectionConfig.contentType,
-          format: sectionFormat
-        });
-      }
-    case 'hours':
-      {
-        return localeText.fieldHoursPlaceholder({
-          format: sectionFormat
-        });
-      }
-    case 'minutes':
-      {
-        return localeText.fieldMinutesPlaceholder({
-          format: sectionFormat
-        });
-      }
-    case 'seconds':
-      {
-        return localeText.fieldSecondsPlaceholder({
-          format: sectionFormat
-        });
-      }
-    case 'meridiem':
-      {
-        return localeText.fieldMeridiemPlaceholder({
-          format: sectionFormat
-        });
-      }
-    default:
-      {
-        return sectionFormat;
-      }
-  }
-};
 export const changeSectionValueFormat = (utils, valueStr, currentFormat, newFormat) => {
   if (process.env.NODE_ENV !== 'production') {
     if (getDateSectionConfigFromFormatToken(utils, currentFormat).type === 'weekDay') {
@@ -367,142 +279,6 @@ export const doesSectionFormatHaveLeadingZeros = (utils, timezone, contentType,
       }
   }
 };
-const getEscapedPartsFromFormat = (utils, format) => {
-  const escapedParts = [];
-  const {
-    start: startChar,
-    end: endChar
-  } = utils.escapedCharacters;
-  const regExp = new RegExp(`(\\${startChar}[^\\${endChar}]*\\${endChar})+`, 'g');
-  let match = null;
-  // eslint-disable-next-line no-cond-assign
-  while (match = regExp.exec(format)) {
-    escapedParts.push({
-      start: match.index,
-      end: regExp.lastIndex - 1
-    });
-  }
-  return escapedParts;
-};
-export const splitFormatIntoSections = (utils, timezone, localeText, localizedDigits, format, date, formatDensity, shouldRespectLeadingZeros, isRTL) => {
-  let startSeparator = '';
-  const sections = [];
-  const now = utils.date();
-  const commitToken = token => {
-    if (token === '') {
-      return null;
-    }
-    const sectionConfig = getDateSectionConfigFromFormatToken(utils, token);
-    const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, timezone, sectionConfig.contentType, sectionConfig.type, token);
-    const hasLeadingZerosInInput = shouldRespectLeadingZeros ? hasLeadingZerosInFormat : sectionConfig.contentType === 'digit';
-    const isValidDate = date != null && utils.isValid(date);
-    let sectionValue = isValidDate ? utils.formatByString(date, token) : '';
-    let maxLength = null;
-    if (hasLeadingZerosInInput) {
-      if (hasLeadingZerosInFormat) {
-        maxLength = sectionValue === '' ? utils.formatByString(now, token).length : sectionValue.length;
-      } else {
-        if (sectionConfig.maxLength == null) {
-          throw new Error(`MUI X: The token ${token} should have a 'maxDigitNumber' property on it's adapter`);
-        }
-        maxLength = sectionConfig.maxLength;
-        if (isValidDate) {
-          sectionValue = applyLocalizedDigits(cleanLeadingZeros(removeLocalizedDigits(sectionValue, localizedDigits), maxLength), localizedDigits);
-        }
-      }
-    }
-    sections.push(_extends({}, sectionConfig, {
-      format: token,
-      maxLength,
-      value: sectionValue,
-      placeholder: getSectionPlaceholder(utils, timezone, localeText, sectionConfig, token),
-      hasLeadingZerosInFormat,
-      hasLeadingZerosInInput,
-      startSeparator: sections.length === 0 ? startSeparator : '',
-      endSeparator: '',
-      modified: false
-    }));
-    return null;
-  };
-
-  // Expand the provided format
-  let formatExpansionOverflow = 10;
-  let prevFormat = format;
-  let nextFormat = utils.expandFormat(format);
-  while (nextFormat !== prevFormat) {
-    prevFormat = nextFormat;
-    nextFormat = utils.expandFormat(prevFormat);
-    formatExpansionOverflow -= 1;
-    if (formatExpansionOverflow < 0) {
-      throw new Error('MUI X: The format expansion seems to be  enter in an infinite loop. Please open an issue with the format passed to the picker component.');
-    }
-  }
-  const expandedFormat = nextFormat;
-
-  // Get start/end indexes of escaped sections
-  const escapedParts = getEscapedPartsFromFormat(utils, expandedFormat);
-
-  // This RegExp test if the beginning of a string correspond to a supported token
-  const isTokenStartRegExp = new RegExp(`^(${Object.keys(utils.formatTokenMap).sort((a, b) => b.length - a.length) // Sort to put longest word first
-  .join('|')})`, 'g') // used to get access to lastIndex state
-  ;
-  let currentTokenValue = '';
-  for (let i = 0; i < expandedFormat.length; i += 1) {
-    const escapedPartOfCurrentChar = escapedParts.find(escapeIndex => escapeIndex.start <= i && escapeIndex.end >= i);
-    const char = expandedFormat[i];
-    const isEscapedChar = escapedPartOfCurrentChar != null;
-    const potentialToken = `${currentTokenValue}${expandedFormat.slice(i)}`;
-    const regExpMatch = isTokenStartRegExp.test(potentialToken);
-    if (!isEscapedChar && char.match(/([A-Za-z]+)/) && regExpMatch) {
-      currentTokenValue = potentialToken.slice(0, isTokenStartRegExp.lastIndex);
-      i += isTokenStartRegExp.lastIndex - 1;
-    } else {
-      // If we are on the opening or closing character of an escaped part of the format,
-      // Then we ignore this character.
-      const isEscapeBoundary = isEscapedChar && (escapedPartOfCurrentChar == null ? void 0 : escapedPartOfCurrentChar.start) === i || (escapedPartOfCurrentChar == null ? void 0 : escapedPartOfCurrentChar.end) === i;
-      if (!isEscapeBoundary) {
-        commitToken(currentTokenValue);
-        currentTokenValue = '';
-        if (sections.length === 0) {
-          startSeparator += char;
-        } else {
-          sections[sections.length - 1].endSeparator += char;
-        }
-      }
-    }
-  }
-  commitToken(currentTokenValue);
-  if (sections.length === 0 && startSeparator.length > 0) {
-    sections.push({
-      type: 'empty',
-      contentType: 'letter',
-      maxLength: null,
-      format: '',
-      value: '',
-      placeholder: '',
-      hasLeadingZerosInFormat: false,
-      hasLeadingZerosInInput: false,
-      startSeparator,
-      endSeparator: '',
-      modified: false
-    });
-  }
-  return sections.map(section => {
-    const cleanSeparator = separator => {
-      let cleanedSeparator = separator;
-      if (isRTL && cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
-        cleanedSeparator = `\u2069${cleanedSeparator}\u2066`;
-      }
-      if (formatDensity === 'spacious' && ['/', '.', '-'].includes(cleanedSeparator)) {
-        cleanedSeparator = ` ${cleanedSeparator} `;
-      }
-      return cleanedSeparator;
-    };
-    section.startSeparator = cleanSeparator(section.startSeparator);
-    section.endSeparator = cleanSeparator(section.endSeparator);
-    return section;
-  });
-};
 
 /**
  * Some date libraries like `dayjs` don't support parsing from date with escaped characters.
@@ -527,7 +303,10 @@ export const getDateFromDateSections = (utils, sections, localizedDigits) => {
   const dateWithoutSeparatorStr = sectionValues.join(' ');
   return utils.parse(dateWithoutSeparatorStr, formatWithoutSeparator);
 };
-export const createDateStrForInputFromSections = (sections, localizedDigits, isRTL) => {
+export const createDateStrForV7HiddenInputFromSections = sections => sections.map(section => {
+  return `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`;
+}).join('');
+export const createDateStrForV6InputFromSections = (sections, localizedDigits, isRTL) => {
   const formattedSections = sections.map(section => {
     const dateValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr', localizedDigits);
     return `${section.startSeparator}${dateValue}${section.endSeparator}`;
@@ -627,7 +406,7 @@ export const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
     }),
     meridiem: () => ({
       minimum: 0,
-      maximum: 0
+      maximum: 1
     }),
     empty: () => ({
       minimum: 0,
@@ -727,9 +506,11 @@ export const mergeDateIntoReferenceDate = (utils, timezone, dateToTransferFrom,
   return mergedDate;
 }, referenceDate);
 export const isAndroid = () => navigator.userAgent.toLowerCase().indexOf('android') > -1;
-export const getSectionOrder = (sections, isRTL) => {
+
+// TODO v8: Remove if we drop the v6 TextField approach.
+export const getSectionOrder = (sections, shouldApplyRTL) => {
   const neighbors = {};
-  if (!isRTL) {
+  if (!shouldApplyRTL) {
     sections.forEach((_, index) => {
       const leftIndex = index === 0 ? null : index - 1;
       const rightIndex = index === sections.length - 1 ? null : index + 1;
@@ -782,4 +563,73 @@ export const getSectionOrder = (sections, isRTL) => {
     startIndex: rtl2ltr[0],
     endIndex: rtl2ltr[sections.length - 1]
   };
+};
+export const parseSelectedSections = (selectedSections, sections) => {
+  if (selectedSections == null) {
+    return null;
+  }
+  if (selectedSections === 'all') {
+    return 'all';
+  }
+  if (typeof selectedSections === 'string') {
+    return sections.findIndex(section => section.type === selectedSections);
+  }
+  return selectedSections;
+};
+export const getSectionValueText = (section, utils) => {
+  if (!section.value) {
+    return undefined;
+  }
+  switch (section.type) {
+    case 'month':
+      {
+        if (section.contentType === 'digit') {
+          return utils.format(utils.setMonth(utils.date(), Number(section.value) - 1), 'month');
+        }
+        const parsedDate = utils.parse(section.value, section.format);
+        return parsedDate ? utils.format(parsedDate, 'month') : undefined;
+      }
+    case 'day':
+      return section.contentType === 'digit' ? utils.format(utils.setDate(utils.startOfYear(utils.date()), Number(section.value)), 'dayOfMonthFull') : section.value;
+    case 'weekDay':
+      // TODO: improve by providing the label of the week day
+      return undefined;
+    default:
+      return undefined;
+  }
+};
+export const getSectionValueNow = (section, utils) => {
+  if (!section.value) {
+    return undefined;
+  }
+  switch (section.type) {
+    case 'weekDay':
+      {
+        if (section.contentType === 'letter') {
+          // TODO: improve by resolving the week day number from a letter week day
+          return undefined;
+        }
+        return Number(section.value);
+      }
+    case 'meridiem':
+      {
+        const parsedDate = utils.parse(`01:00 ${section.value}`, `${utils.formats.hours12h}:${utils.formats.minutes} ${section.format}`);
+        if (parsedDate) {
+          return utils.getHours(parsedDate) >= 12 ? 1 : 0;
+        }
+        return undefined;
+      }
+    case 'day':
+      return section.contentType === 'digit-with-letter' ? parseInt(section.value, 10) : Number(section.value);
+    case 'month':
+      {
+        if (section.contentType === 'digit') {
+          return Number(section.value);
+        }
+        const parsedDate = utils.parse(section.value, section.format);
+        return parsedDate ? utils.getMonth(parsedDate) + 1 : undefined;
+      }
+    default:
+      return section.contentType !== 'letter' ? Number(section.value) : undefined;
+  }
 };

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

@@ -1,11 +1,11 @@
 import { FieldSection, PickersTimezone, PickerValidDate } from '../../../models';
 import { FieldSectionsValueBoundaries } from './useField.types';
 import { UpdateSectionValueParams } from './useFieldState';
-interface ApplyCharacterEditingParams {
+export interface ApplyCharacterEditingParams {
     keyPressed: string;
     sectionIndex: number;
 }
-interface UseFieldEditingParams<TDate extends PickerValidDate, TSection extends FieldSection> {
+interface UseFieldCharacterEditingParams<TDate extends PickerValidDate, TSection extends FieldSection> {
     sections: TSection[];
     updateSectionValue: (params: UpdateSectionValueParams<TSection>) => void;
     sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>;
@@ -13,6 +13,10 @@ interface UseFieldEditingParams<TDate extends PickerValidDate, TSection extends
     setTempAndroidValueStr: (newValue: string | null) => void;
     timezone: PickersTimezone;
 }
+export interface UseFieldCharacterEditingResponse {
+    applyCharacterEditing: (params: ApplyCharacterEditingParams) => void;
+    resetCharacterQuery: () => void;
+}
 /**
  * Update the active section value when the user pressed a key that is not a navigation key (arrow key for example).
  * This hook has two main editing behaviors
@@ -20,8 +24,5 @@ interface UseFieldEditingParams<TDate extends PickerValidDate, TSection extends
  * 1. The numeric editing when the user presses a digit
  * 2. The letter editing when the user presses another key
  */
-export declare const useFieldCharacterEditing: <TDate extends PickerValidDate, TSection extends FieldSection>({ sections, updateSectionValue, sectionsValueBoundaries, localizedDigits, setTempAndroidValueStr, timezone, }: UseFieldEditingParams<TDate, TSection>) => {
-    applyCharacterEditing: (params: ApplyCharacterEditingParams) => void;
-    resetCharacterQuery: () => void;
-};
+export declare const useFieldCharacterEditing: <TDate extends PickerValidDate, TSection extends FieldSection>({ sections, updateSectionValue, sectionsValueBoundaries, localizedDigits, setTempAndroidValueStr, timezone, }: UseFieldCharacterEditingParams<TDate, TSection>) => UseFieldCharacterEditingResponse;
 export {};