@mui/x-date-pickers 7.0.0-alpha.7 → 7.0.0-alpha.9

package/index.d.ts

@@ -3,7 +3,7 @@ export * from './DigitalClock';
 export * from './MultiSectionDigitalClock';
 export * from './LocalizationProvider';
 export * from './PickersDay';
-export * from './locales';
+export * from './locales/utils/pickersLocaleTextApi';
 export * from './DateField';
 export * from './TimeField';
 export * from './DateTimeField';
@@ -29,6 +29,7 @@ export * from './PickersLayout';
 export * from './PickersActionBar';
 export * from './PickersShortcuts';
 export * from './PickersCalendarHeader';
+export * from './PickersTextField';
 export * from './PickersSectionList';
 export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
 export * from './models';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.0.0-alpha.7
+ * @mui/x-date-pickers v7.0.0-alpha.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -11,7 +11,7 @@ export * from './DigitalClock';
 export * from './MultiSectionDigitalClock';
 export * from './LocalizationProvider';
 export * from './PickersDay';
-export * from './locales';
+export * from './locales/utils/pickersLocaleTextApi';
 
 // Fields
 export * from './DateField';
@@ -51,6 +51,7 @@ export * from './PickersShortcuts';
 export * from './PickersCalendarHeader';
 
 // Field utilities
+export * from './PickersTextField';
 export * from './PickersSectionList';
 export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
 export * from './models';

package/internals/hooks/useField/useField.js

@@ -24,6 +24,7 @@ export const useField = params => {
     updateValueFromValueStr,
     setTempAndroidValueStr,
     sectionsValueBoundaries,
+    localizedDigits,
     placeholder,
     timezone
   } = useFieldState(params);
@@ -59,6 +60,7 @@ export const useField = params => {
     sections: state.sections,
     updateSectionValue,
     sectionsValueBoundaries,
+    localizedDigits,
     setTempAndroidValueStr,
     timezone
   });
@@ -191,7 +193,7 @@ export const useField = params => {
     if (selectedSectionIndexes.startIndex === 0 && selectedSectionIndexes.endIndex === state.sections.length - 1 && cleanValueStr.length === 1) {
       keyPressed = cleanValueStr;
     } else {
-      const prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections, isRTL));
+      const prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections, localizedDigits, isRTL));
       let startOfDiffIndex = -1;
       let endOfDiffIndex = -1;
       for (let i = 0; i < prevValueStr.length; i += 1) {
@@ -301,7 +303,7 @@ export const useField = params => {
           }
           const activeSection = state.sections[selectedSectionIndexes.startIndex];
           const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
-          const newSectionValue = adjustSectionValue(utils, timezone, activeSection, event.key, sectionsValueBoundaries, activeDateManager.date, {
+          const newSectionValue = adjustSectionValue(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, activeDateManager.date, {
             minutesStep
           });
           updateSectionValue({
@@ -386,8 +388,8 @@ export const useField = params => {
 
   const valueStr = React.useMemo(() => {
     var _state$tempValueStrAn;
-    return (_state$tempValueStrAn = state.tempValueStrAndroid) != null ? _state$tempValueStrAn : fieldValueManager.getValueStrFromSections(state.sections, isRTL);
-  }, [state.sections, fieldValueManager, state.tempValueStrAndroid, isRTL]);
+    return (_state$tempValueStrAn = state.tempValueStrAndroid) != null ? _state$tempValueStrAn : fieldValueManager.getValueStrFromSections(state.sections, localizedDigits, isRTL);
+  }, [state.sections, fieldValueManager, state.tempValueStrAndroid, localizedDigits, isRTL]);
   const inputMode = React.useMemo(() => {
     if (selectedSectionIndexes == null) {
       return 'text';

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

@@ -208,19 +208,21 @@ export interface FieldValueManager<TValue, TDate, TSection extends FieldSection>
      * @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.
      * @returns {TSection[]}  The new section list.
      */
-    getSectionsFromValue: (utils: MuiPickersAdapter<TDate>, value: TValue, fallbackSections: TSection[] | null, isRTL: boolean, getSectionsFromDate: (date: TDate) => FieldSectionWithoutPosition[]) => TSection[];
+    getSectionsFromValue: (utils: MuiPickersAdapter<TDate>, value: TValue, fallbackSections: TSection[] | null, localizedDigits: string[], isRTL: boolean, getSectionsFromDate: (date: TDate) => FieldSectionWithoutPosition[]) => TSection[];
     /**
      * Creates the string value to render in the input based on the current section list.
      * @template TSection
      * @param {TSection[]} sections The current section list.
+     * @param {string} localizedDigits The conversion table from localized to 0-9 digits.
      * @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[], isRTL: boolean) => string;
+    getValueStrFromSections: (sections: TSection[], localizedDigits: string[], isRTL: boolean) => string;
     /**
      * Returns the manager of the active date.
      * @template TValue, TDate, TSection

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

@@ -6,24 +6,34 @@ export declare const getDateSectionConfigFromFormatToken: <TDate>(utils: MuiPick
 };
 export declare const getDaysInWeekStr: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, format: string) => string[];
 export declare const getLetterEditingOptions: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, sectionType: FieldSectionType, format: string) => string[];
-export declare const cleanLeadingZeros: <TDate>(utils: MuiPickersAdapter<TDate, any>, valueStr: string, size: number) => string;
-export declare const cleanDigitSectionValue: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, value: number, sectionBoundaries: FieldSectionValueBoundaries<TDate, any>, section: Pick<FieldSection, 'format' | 'type' | 'contentType' | 'hasLeadingZerosInFormat' | 'hasLeadingZerosInInput' | 'maxLength'>) => string;
-export declare const adjustSectionValue: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, section: TSection, keyCode: AvailableAdjustKeyCode, sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>, activeDate: TDate | null, stepsAttributes?: {
+export declare const FORMAT_SECONDS_NO_LEADING_ZEROS = "s";
+export declare const getLocalizedDigits: <TDate>(utils: MuiPickersAdapter<TDate, any>) => string[];
+export declare const removeLocalizedDigits: (valueStr: string, localizedDigits: string[]) => string;
+export declare const applyLocalizedDigits: (valueStr: string, localizedDigits: string[]) => string;
+export declare const isStringNumber: (valueStr: string, localizedDigits: string[]) => boolean;
+/**
+ * Remove the leading zeroes to a digit section value.
+ * E.g.: `03` => `3`
+ * Warning: Should only be called with non-localized digits. Call `removeLocalizedDigits` with your value if needed.
+ */
+export declare const cleanLeadingZeros: (valueStr: string, size: number) => string;
+export declare const cleanDigitSectionValue: <TDate>(utils: MuiPickersAdapter<TDate, any>, value: number, sectionBoundaries: FieldSectionValueBoundaries<TDate, any>, localizedDigits: string[], section: Pick<FieldSection, 'format' | 'type' | 'contentType' | 'hasLeadingZerosInFormat' | 'hasLeadingZerosInInput' | 'maxLength'>) => string;
+export declare const adjustSectionValue: <TDate, 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') => 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>[], isRTL: boolean) => TSection[];
+export declare const addPositionPropertiesToSections: <TSection extends FieldSection>(sections: FieldSectionWithoutPosition<TSection>[], localizedDigits: string[], isRTL: boolean) => TSection[];
 export declare const changeSectionValueFormat: <TDate>(utils: MuiPickersAdapter<TDate, any>, valueStr: string, currentFormat: string, newFormat: string) => string;
 export declare const doesSectionFormatHaveLeadingZeros: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, contentType: FieldSectionContentType, sectionType: FieldSectionType, format: string) => boolean;
-export declare const splitFormatIntoSections: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, localeText: PickersLocaleText<TDate>, format: string, date: TDate | null, formatDensity: 'dense' | 'spacious', shouldRespectLeadingZeros: boolean, isRTL: boolean) => FieldSectionWithoutPosition[];
+export declare const splitFormatIntoSections: <TDate>(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>(utils: MuiPickersAdapter<TDate, any>, sections: FieldSection[]) => NonNullable<TDate>;
-export declare const createDateStrForInputFromSections: (sections: FieldSection[], isRTL: boolean) => string;
-export declare const getSectionsBoundaries: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone) => FieldSectionsValueBoundaries<TDate>;
+export declare const getDateFromDateSections: <TDate>(utils: MuiPickersAdapter<TDate, any>, sections: FieldSection[], localizedDigits: string[]) => NonNullable<TDate>;
+export declare const createDateStrForInputFromSections: (sections: FieldSection[], localizedDigits: string[], isRTL: boolean) => string;
+export declare const getSectionsBoundaries: <TDate>(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>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, dateToTransferFrom: TDate, sections: FieldSectionWithoutPosition[], referenceDate: TDate, shouldLimitToEditedSections: boolean) => TDate;
 export declare const isAndroid: () => boolean;

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

@@ -3,7 +3,7 @@ import { getMonthsInYear } from '../../utils/date-utils';
 export const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
   const config = utils.formatTokenMap[formatToken];
   if (config == null) {
-    throw new Error([`MUI: The token "${formatToken}" is not supported by the Date and Time Pickers.`, 'Please try using another token or open an issue on https://github.com/mui/mui-x/issues/new/choose if you think it should be supported.'].join('\n'));
+    throw new Error([`MUI X: The token "${formatToken}" is not supported by the Date and Time Pickers.`, 'Please try using another token or open an issue on https://github.com/mui/mui-x/issues/new/choose if you think it should be supported.'].join('\n'));
   }
   if (typeof config === 'string') {
     return {
@@ -65,7 +65,54 @@ export const getLetterEditingOptions = (utils, timezone, sectionType, format) =>
       }
   }
 };
-export const cleanLeadingZeros = (utils, valueStr, size) => {
+
+// This format should be the same on all the adapters
+// If some adapter does not respect this convention, then we will need to hardcode the format on each adapter.
+export const FORMAT_SECONDS_NO_LEADING_ZEROS = 's';
+const NON_LOCALIZED_DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+export const getLocalizedDigits = utils => {
+  const today = utils.date(undefined);
+  const formattedZero = utils.formatByString(utils.setSeconds(today, 0), FORMAT_SECONDS_NO_LEADING_ZEROS);
+  if (formattedZero === '0') {
+    return NON_LOCALIZED_DIGITS;
+  }
+  return Array.from({
+    length: 10
+  }).map((_, index) => utils.formatByString(utils.setSeconds(today, index), FORMAT_SECONDS_NO_LEADING_ZEROS));
+};
+export const removeLocalizedDigits = (valueStr, localizedDigits) => {
+  if (localizedDigits[0] === '0') {
+    return valueStr;
+  }
+  const digits = [];
+  let currentFormattedDigit = '';
+  for (let i = 0; i < valueStr.length; i += 1) {
+    currentFormattedDigit += valueStr[i];
+    const matchingDigitIndex = localizedDigits.indexOf(currentFormattedDigit);
+    if (matchingDigitIndex > -1) {
+      digits.push(matchingDigitIndex.toString());
+      currentFormattedDigit = '';
+    }
+  }
+  return digits.join('');
+};
+export const applyLocalizedDigits = (valueStr, localizedDigits) => {
+  if (localizedDigits[0] === '0') {
+    return valueStr;
+  }
+  return valueStr.split('').map(char => localizedDigits[Number(char)]).join('');
+};
+export const isStringNumber = (valueStr, localizedDigits) => {
+  const nonLocalizedValueStr = removeLocalizedDigits(valueStr, localizedDigits);
+  return !Number.isNaN(Number(nonLocalizedValueStr));
+};
+
+/**
+ * Remove the leading zeroes to a digit section value.
+ * E.g.: `03` => `3`
+ * Warning: Should only be called with non-localized digits. Call `removeLocalizedDigits` with your value if needed.
+ */
+export const cleanLeadingZeros = (valueStr, size) => {
   let cleanValueStr = valueStr;
 
   // Remove the leading zeros
@@ -77,10 +124,10 @@ export const cleanLeadingZeros = (utils, valueStr, size) => {
   }
   return cleanValueStr;
 };
-export const cleanDigitSectionValue = (utils, timezone, value, sectionBoundaries, section) => {
+export const cleanDigitSectionValue = (utils, value, sectionBoundaries, localizedDigits, section) => {
   if (process.env.NODE_ENV !== 'production') {
     if (section.type !== 'day' && section.contentType === 'digit-with-letter') {
-      throw new Error([`MUI: The token "${section.format}" is a digit format with letter in it.'
+      throw new Error([`MUI X: The token "${section.format}" is a digit format with letter in it.'
              This type of format is only supported for 'day' sections`].join('\n'));
     }
   }
@@ -90,13 +137,13 @@ export const cleanDigitSectionValue = (utils, timezone, value, sectionBoundaries
   }
 
   // queryValue without leading `0` (`01` => `1`)
-  const valueStr = value.toString();
+  let valueStr = value.toString();
   if (section.hasLeadingZerosInInput) {
-    return cleanLeadingZeros(utils, valueStr, section.maxLength);
+    valueStr = cleanLeadingZeros(valueStr, section.maxLength);
   }
-  return valueStr;
+  return applyLocalizedDigits(valueStr, localizedDigits);
 };
-export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsValueBoundaries, activeDate, stepsAttributes) => {
+export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsValueBoundaries, localizedDigits, activeDate, stepsAttributes) => {
   const delta = getDeltaFromKeyCode(keyCode);
   const isStart = keyCode === 'Home';
   const isEnd = keyCode === 'End';
@@ -107,9 +154,9 @@ export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsVa
       format: section.format,
       contentType: section.contentType
     });
-    const getCleanValue = value => cleanDigitSectionValue(utils, timezone, value, sectionBoundaries, section);
+    const getCleanValue = value => cleanDigitSectionValue(utils, value, sectionBoundaries, localizedDigits, section);
     const step = section.type === 'minutes' && stepsAttributes != null && stepsAttributes.minutesStep ? stepsAttributes.minutesStep : 1;
-    const currentSectionValue = parseInt(section.value, 10);
+    const currentSectionValue = parseInt(removeLocalizedDigits(section.value, localizedDigits), 10);
     let newSectionValueNumber = currentSectionValue + delta * step;
     if (shouldSetAbsolute) {
       if (section.type === 'year' && !isEnd && !isStart) {
@@ -157,11 +204,11 @@ export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsVa
   }
   return adjustLetterSection();
 };
-export const getSectionVisibleValue = (section, target) => {
+export const getSectionVisibleValue = (section, target, localizedDigits) => {
   let value = section.value || section.placeholder;
   const hasLeadingZeros = target === 'non-input' ? section.hasLeadingZerosInFormat : section.hasLeadingZerosInInput;
   if (target === 'non-input' && section.hasLeadingZerosInInput && !section.hasLeadingZerosInFormat) {
-    value = Number(value).toString();
+    value = Number(removeLocalizedDigits(value, localizedDigits)).toString();
   }
 
   // In the input, we add an empty character at the end of each section without leading zeros.
@@ -179,13 +226,13 @@ export const getSectionVisibleValue = (section, target) => {
   return value;
 };
 export const cleanString = dirtyString => dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
-export const addPositionPropertiesToSections = (sections, isRTL) => {
+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');
+    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;
@@ -337,7 +384,7 @@ const getEscapedPartsFromFormat = (utils, format) => {
   }
   return escapedParts;
 };
-export const splitFormatIntoSections = (utils, timezone, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL) => {
+export const splitFormatIntoSections = (utils, timezone, localeText, localizedDigits, format, date, formatDensity, shouldRespectLeadingZeros, isRTL) => {
   let startSeparator = '';
   const sections = [];
   const now = utils.date();
@@ -356,11 +403,11 @@ export const splitFormatIntoSections = (utils, timezone, localeText, format, dat
         maxLength = sectionValue === '' ? utils.formatByString(now, token).length : sectionValue.length;
       } else {
         if (sectionConfig.maxLength == null) {
-          throw new Error(`MUI: The token ${token} should have a 'maxDigitNumber' property on it's adapter`);
+          throw new Error(`MUI X: The token ${token} should have a 'maxDigitNumber' property on it's adapter`);
         }
         maxLength = sectionConfig.maxLength;
         if (isValidDate) {
-          sectionValue = cleanLeadingZeros(utils, sectionValue, maxLength);
+          sectionValue = applyLocalizedDigits(cleanLeadingZeros(removeLocalizedDigits(sectionValue, localizedDigits), maxLength), localizedDigits);
         }
       }
     }
@@ -387,7 +434,7 @@ export const splitFormatIntoSections = (utils, timezone, localeText, format, dat
     nextFormat = utils.expandFormat(prevFormat);
     formatExpansionOverflow -= 1;
     if (formatExpansionOverflow < 0) {
-      throw new Error('MUI: The format expansion seems to be  enter in an infinite loop. Please open an issue with the format passed to the picker component');
+      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;
@@ -461,7 +508,7 @@ export const splitFormatIntoSections = (utils, timezone, localeText, format, dat
  * 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 const getDateFromDateSections = (utils, sections) => {
+export const getDateFromDateSections = (utils, sections, localizedDigits) => {
   // If we have both a day and a weekDay section,
   // Then we skip the weekDay in the parsing because libraries like dayjs can't parse complicated formats containing a weekDay.
   // dayjs(dayjs().format('dddd MMMM D YYYY'), 'dddd MMMM D YYYY')) // returns `Invalid Date` even if the format is valid.
@@ -473,16 +520,16 @@ export const getDateFromDateSections = (utils, sections) => {
     const shouldSkip = shouldSkipWeekDays && section.type === 'weekDay';
     if (!shouldSkip) {
       sectionFormats.push(section.format);
-      sectionValues.push(getSectionVisibleValue(section, 'non-input'));
+      sectionValues.push(getSectionVisibleValue(section, 'non-input', localizedDigits));
     }
   }
   const formatWithoutSeparator = sectionFormats.join(' ');
   const dateWithoutSeparatorStr = sectionValues.join(' ');
   return utils.parse(dateWithoutSeparatorStr, formatWithoutSeparator);
 };
-export const createDateStrForInputFromSections = (sections, isRTL) => {
+export const createDateStrForInputFromSections = (sections, localizedDigits, isRTL) => {
   const formattedSections = sections.map(section => {
-    const dateValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr');
+    const dateValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr', localizedDigits);
     return `${section.startSeparator}${dateValue}${section.endSeparator}`;
   });
   const dateStr = formattedSections.join('');
@@ -497,7 +544,7 @@ export const createDateStrForInputFromSections = (sections, isRTL) => {
   // wrap into an isolated group such that separators can split the string in smaller ones by adding \u2069\u2068
   return `\u2066${dateStr}\u2069`;
 };
-export const getSectionsBoundaries = (utils, timezone) => {
+export const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
   const today = utils.date(undefined, timezone);
   const endOfYear = utils.endOfYear(today);
   const endOfDay = utils.endOfDay(today);
@@ -556,11 +603,11 @@ export const getSectionsBoundaries = (utils, timezone) => {
       format
     }) => {
       const lastHourInDay = utils.getHours(endOfDay);
-      const hasMeridiem = utils.formatByString(utils.endOfDay(today), format) !== lastHourInDay.toString();
+      const hasMeridiem = removeLocalizedDigits(utils.formatByString(utils.endOfDay(today), format), localizedDigits) !== lastHourInDay.toString();
       if (hasMeridiem) {
         return {
           minimum: 1,
-          maximum: Number(utils.formatByString(utils.startOfDay(today), format))
+          maximum: Number(removeLocalizedDigits(utils.formatByString(utils.startOfDay(today), format), localizedDigits))
         };
       }
       return {
@@ -601,7 +648,7 @@ export const validateSections = (sections, valueType) => {
       }
       const invalidSection = sections.find(section => !supportedSections.includes(section.type));
       if (invalidSection) {
-        console.warn(`MUI: The field component you are using is not compatible with the "${invalidSection.type}" date section.`, `The supported date sections are ["${supportedSections.join('", "')}"]\`.`);
+        console.warn(`MUI X: The field component you are using is not compatible with the "${invalidSection.type}" date section.`, `The supported date sections are ["${supportedSections.join('", "')}"]\`.`);
         warnedOnceInvalidSection = true;
       }
     }

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

@@ -9,6 +9,7 @@ interface UseFieldEditingParams<TDate, TSection extends FieldSection> {
     sections: TSection[];
     updateSectionValue: (params: UpdateSectionValueParams<TSection>) => void;
     sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>;
+    localizedDigits: string[];
     setTempAndroidValueStr: (newValue: string | null) => void;
     timezone: PickersTimezone;
 }
@@ -19,7 +20,7 @@ interface UseFieldEditingParams<TDate, TSection extends FieldSection> {
  * 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, TSection extends FieldSection>({ sections, updateSectionValue, sectionsValueBoundaries, setTempAndroidValueStr, timezone, }: UseFieldEditingParams<TDate, TSection>) => {
+export declare const useFieldCharacterEditing: <TDate, TSection extends FieldSection>({ sections, updateSectionValue, sectionsValueBoundaries, localizedDigits, setTempAndroidValueStr, timezone, }: UseFieldEditingParams<TDate, TSection>) => {
     applyCharacterEditing: (params: ApplyCharacterEditingParams) => void;
     resetCharacterQuery: () => void;
 };

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, cleanDigitSectionValue, doesSectionFormatHaveLeadingZeros, getDateSectionConfigFromFormatToken, getDaysInWeekStr, getLetterEditingOptions } from './useField.utils';
+import { changeSectionValueFormat, cleanDigitSectionValue, doesSectionFormatHaveLeadingZeros, getDateSectionConfigFromFormatToken, getDaysInWeekStr, getLetterEditingOptions, applyLocalizedDigits, removeLocalizedDigits, isStringNumber } from './useField.utils';
 
 /**
  * The letter editing and the numeric editing each define a `CharacterEditingApplier`.
@@ -40,6 +40,7 @@ export const useFieldCharacterEditing = ({
   sections,
   updateSectionValue,
   sectionsValueBoundaries,
+  localizedDigits,
   setTempAndroidValueStr,
   timezone
 }) => {
@@ -69,7 +70,7 @@ export const useFieldCharacterEditing = ({
     const activeSection = sections[sectionIndex];
 
     // The current query targets the section being editing
-    // We can try to concatenated value
+    // We can try to concatenate the value
     if (query != null && (!isValidQueryValue || isValidQueryValue(query.value)) && query.sectionIndex === sectionIndex) {
       const concatenatedQueryValue = `${query.value}${cleanKeyPressed}`;
       const queryResponse = getFirstSectionValueMatchingWithQuery(concatenatedQueryValue, activeSection);
@@ -163,7 +164,8 @@ export const useFieldCharacterEditing = ({
   };
   const applyNumericEditing = params => {
     const getNewSectionValue = (queryValue, section) => {
-      const queryValueNumber = Number(`${queryValue}`);
+      const cleanQueryValue = removeLocalizedDigits(queryValue, localizedDigits);
+      const queryValueNumber = Number(cleanQueryValue);
       const sectionBoundaries = sectionsValueBoundaries[section.type]({
         currentDate: null,
         format: section.format,
@@ -183,8 +185,8 @@ export const useFieldCharacterEditing = ({
           saveQuery: true
         };
       }
-      const shouldGoToNextSection = Number(`${queryValue}0`) > sectionBoundaries.maximum || queryValue.length === sectionBoundaries.maximum.toString().length;
-      const newSectionValue = cleanDigitSectionValue(utils, timezone, queryValueNumber, sectionBoundaries, section);
+      const shouldGoToNextSection = queryValueNumber * 10 > sectionBoundaries.maximum || cleanQueryValue.length === sectionBoundaries.maximum.toString().length;
+      const newSectionValue = cleanDigitSectionValue(utils, queryValueNumber, sectionBoundaries, localizedDigits, section);
       return {
         sectionValue: newSectionValue,
         shouldGoToNextSection
@@ -232,12 +234,14 @@ export const useFieldCharacterEditing = ({
         saveQuery: false
       };
     };
-    return applyQuery(params, getFirstSectionValueMatchingWithQuery, queryValue => !Number.isNaN(Number(queryValue)));
+    return applyQuery(params, getFirstSectionValueMatchingWithQuery, queryValue => isStringNumber(queryValue, localizedDigits));
   };
   const applyCharacterEditing = useEventCallback(params => {
     const activeSection = sections[params.sectionIndex];
-    const isNumericEditing = !Number.isNaN(Number(params.keyPressed));
-    const response = isNumericEditing ? applyNumericEditing(params) : applyLetterEditing(params);
+    const isNumericEditing = isStringNumber(params.keyPressed, localizedDigits);
+    const response = isNumericEditing ? applyNumericEditing(_extends({}, params, {
+      keyPressed: applyLocalizedDigits(params.keyPressed, localizedDigits)
+    })) : applyLetterEditing(params);
     if (response == null) {
       setTempAndroidValueStr(null);
     } else {

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

@@ -24,6 +24,7 @@ export declare const useFieldState: <TValue, TDate, TSection extends FieldSectio
     updateValueFromValueStr: (valueStr: string) => void;
     setTempAndroidValueStr: (tempValueStrAndroid: string | null) => void;
     sectionsValueBoundaries: import("./useField.types").FieldSectionsValueBoundaries<TDate>;
+    localizedDigits: string[];
     placeholder: string;
     timezone: string;
 };

package/internals/hooks/useField/useFieldState.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import useControlled from '@mui/utils/useControlled';
 import { useTheme } from '@mui/material/styles';
 import { useUtils, useLocaleText, useLocalizationContext } from '../useUtils';
-import { addPositionPropertiesToSections, splitFormatIntoSections, mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections } from './useField.utils';
+import { addPositionPropertiesToSections, splitFormatIntoSections, mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections, getLocalizedDigits } from './useField.utils';
 import { useValueWithTimezone } from '../useValueWithTimezone';
 import { getSectionTypeGranularity } from '../../utils/getDefaultReferenceDate';
 export const useFieldState = params => {
@@ -42,9 +42,10 @@ export const useFieldState = params => {
     onChange,
     valueManager
   });
-  const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils, timezone), [utils, timezone]);
-  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, date => splitFormatIntoSections(utils, timezone, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL)), [fieldValueManager, format, localeText, isRTL, shouldRespectLeadingZeros, utils, formatDensity, timezone]);
-  const placeholder = React.useMemo(() => fieldValueManager.getValueStrFromSections(getSectionsFromValue(valueManager.emptyValue), isRTL), [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, isRTL]);
+  const localizedDigits = React.useMemo(() => getLocalizedDigits(utils), [utils]);
+  const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils, localizedDigits, timezone), [utils, localizedDigits, timezone]);
+  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, localizedDigits, isRTL, date => splitFormatIntoSections(utils, timezone, localeText, localizedDigits, format, date, formatDensity, shouldRespectLeadingZeros, isRTL)), [fieldValueManager, format, localeText, localizedDigits, isRTL, shouldRespectLeadingZeros, utils, formatDensity, timezone]);
+  const placeholder = React.useMemo(() => fieldValueManager.getValueStrFromSections(getSectionsFromValue(valueManager.emptyValue), localizedDigits, isRTL), [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, localizedDigits, isRTL]);
   const [state, setState] = React.useState(() => {
     const sections = getSectionsFromValue(valueFromTheOutside);
     validateSections(sections, valueType);
@@ -142,7 +143,7 @@ export const useFieldState = params => {
       value: newSectionValue,
       modified: true
     });
-    return addPositionPropertiesToSections(newSections, isRTL);
+    return addPositionPropertiesToSections(newSections, localizedDigits, isRTL);
   };
   const clearValue = () => {
     publishValue({
@@ -179,7 +180,7 @@ export const useFieldState = params => {
       if (date == null || !utils.isValid(date)) {
         return null;
       }
-      const sections = splitFormatIntoSections(utils, timezone, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL);
+      const sections = splitFormatIntoSections(utils, timezone, localeText, localizedDigits, format, date, formatDensity, shouldRespectLeadingZeros, isRTL);
       return mergeDateIntoReferenceDate(utils, timezone, date, sections, referenceDate, false);
     };
     const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);
@@ -210,7 +211,7 @@ export const useFieldState = params => {
     const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
     const newSections = setSectionValue(selectedSectionIndexes.startIndex, newSectionValue);
     const newActiveDateSections = activeDateManager.getSections(newSections);
-    const newActiveDate = getDateFromDateSections(utils, newActiveDateSections);
+    const newActiveDate = getDateFromDateSections(utils, newActiveDateSections, localizedDigits);
     let values;
     let shouldPublish;
 
@@ -278,6 +279,7 @@ export const useFieldState = params => {
     updateValueFromValueStr,
     setTempAndroidValueStr,
     sectionsValueBoundaries,
+    localizedDigits,
     placeholder,
     timezone
   };

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

@@ -1,3 +1,3 @@
 export { usePicker } from './usePicker';
 export type { UsePickerProps, UsePickerBaseProps, UsePickerParams, UsePickerResponse, } from './usePicker.types';
-export type { PickerValueManager, PickerSelectionState } from './usePickerValue.types';
+export type { PickerValueManager, PickerSelectionState, UsePickerValueFieldResponse, } from './usePickerValue.types';

package/internals/hooks/usePicker/usePickerValue.js

@@ -138,12 +138,12 @@ export const usePickerValue = ({
   if (process.env.NODE_ENV !== 'production') {
     React.useEffect(() => {
       if (isControlled !== (inValue !== undefined)) {
-        console.error([`MUI: A component is changing the ${isControlled ? '' : 'un'}controlled value of a picker to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled value` + 'for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+        console.error([`MUI X: A component is changing the ${isControlled ? '' : 'un'}controlled value of a picker to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled value` + 'for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
       }
     }, [inValue]);
     React.useEffect(() => {
       if (!isControlled && defaultValue !== inDefaultValue) {
-        console.error([`MUI: A component is changing the defaultValue of an uncontrolled picker after being initialized. ` + `To suppress this warning opt to use a controlled value.`].join('\n'));
+        console.error([`MUI X: A component is changing the defaultValue of an uncontrolled picker after being initialized. ` + `To suppress this warning opt to use a controlled value.`].join('\n'));
       }
     }, [JSON.stringify(defaultValue)]);
   }

package/internals/hooks/useUtils.js

@@ -5,10 +5,10 @@ import { DEFAULT_LOCALE } from '../../locales/enUS';
 export const useLocalizationContext = () => {
   const localization = React.useContext(MuiPickersAdapterContext);
   if (localization === null) {
-    throw new Error(['MUI: Can not find the date and time pickers localization context.', 'It looks like you forgot to wrap your component in LocalizationProvider.', 'This can also happen if you are bundling multiple versions of the `@mui/x-date-pickers` package'].join('\n'));
+    throw new Error(['MUI X: Can not find the date and time pickers localization context.', 'It looks like you forgot to wrap your component in LocalizationProvider.', 'This can also happen if you are bundling multiple versions of the `@mui/x-date-pickers` package'].join('\n'));
   }
   if (localization.utils === null) {
-    throw new Error(['MUI: Can not find the date and time pickers adapter from its localization context.', 'It looks like you forgot to pass a `dateAdapter` to your LocalizationProvider.'].join('\n'));
+    throw new Error(['MUI X: Can not find the date and time pickers adapter from its localization context.', 'It looks like you forgot to pass a `dateAdapter` to your LocalizationProvider.'].join('\n'));
   }
   const localeText = React.useMemo(() => _extends({}, DEFAULT_LOCALE, localization.localeText), [localization.localeText]);
   return React.useMemo(() => _extends({}, localization, {

package/internals/hooks/useViews.js

@@ -16,11 +16,11 @@ export function useViews({
   if (process.env.NODE_ENV !== 'production') {
     if (!warnedOnceNotValidView) {
       if (inView != null && !views.includes(inView)) {
-        console.warn(`MUI: \`view="${inView}"\` is not a valid prop.`, `It must be an element of \`views=["${views.join('", "')}"]\`.`);
+        console.warn(`MUI X: \`view="${inView}"\` is not a valid prop.`, `It must be an element of \`views=["${views.join('", "')}"]\`.`);
         warnedOnceNotValidView = true;
       }
       if (inView == null && openTo != null && !views.includes(openTo)) {
-        console.warn(`MUI: \`openTo="${openTo}"\` is not a valid prop.`, `It must be an element of \`views=["${views.join('", "')}"]\`.`);
+        console.warn(`MUI X: \`openTo="${openTo}"\` is not a valid prop.`, `It must be an element of \`views=["${views.join('", "')}"]\`.`);
         warnedOnceNotValidView = true;
       }
     }