@mui/x-date-pickers 7.0.0-alpha.8 → 7.0.0-beta.0

package/dateTimeViewRenderers/dateTimeViewRenderers.js

@@ -139,23 +139,23 @@ export const renderDesktopDateTimeView = ({
           view: 'hours',
           views: ['hours'],
           focusedView: focusedView && isInternalTimeView(focusedView) ? 'hours' : null,
-          sx: _extends({
+          sx: [{
             width: 'auto',
             [`&.${digitalClockClasses.root}`]: {
               maxHeight: VIEW_HEIGHT
             }
-          }, Array.isArray(sx) ? sx : [sx])
+          }, ...(Array.isArray(sx) ? sx : [sx])]
         })) : renderMultiSectionDigitalClockTimeView(_extends({}, commonTimeProps, {
           view: isInternalTimeView(view) ? view : 'hours',
           views: views.filter(isInternalTimeView),
           focusedView: focusedView && isInternalTimeView(focusedView) ? focusedView : null,
-          sx: _extends({
+          sx: [{
             borderBottom: 0,
             width: 'auto',
             [`.${multiSectionDigitalClockSectionClasses.root}`]: {
               maxHeight: '100%'
             }
-          }, Array.isArray(sx) ? sx : [sx])
+          }, ...(Array.isArray(sx) ? sx : [sx])]
         }))]
       })]
     }), isActionBarVisible && /*#__PURE__*/_jsx(Divider, {})]

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.8
+ * @mui/x-date-pickers v7.0.0-beta.0
  *
  * @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

@@ -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,7 +124,7 @@ 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 X: The token "${section.format}" is a digit format with letter in it.'
@@ -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();
@@ -360,7 +407,7 @@ export const splitFormatIntoSections = (utils, timezone, localeText, format, dat
         }
         maxLength = sectionConfig.maxLength;
         if (isValidDate) {
-          sectionValue = cleanLeadingZeros(utils, sectionValue, maxLength);
+          sectionValue = applyLocalizedDigits(cleanLeadingZeros(removeLocalizedDigits(sectionValue, localizedDigits), maxLength), localizedDigits);
         }
       }
     }
@@ -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 {

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/usePicker.d.ts

@@ -2,4 +2,4 @@ import { UsePickerParams, UsePickerProps, UsePickerResponse } from './usePicker.
 import { InferError } from '../useValidation';
 import { FieldSection } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
-export declare const usePicker: <TValue, TDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TDate, TView, TSection, any, any, any>, TAdditionalProps extends {}>({ props, valueManager, valueType, wrapperVariant, inputRef, additionalViewProps, validator, autoFocusView, }: UsePickerParams<TValue, TDate, TView, TSection, TExternalProps, TAdditionalProps>) => UsePickerResponse<TValue, TView, TSection, InferError<TExternalProps>>;
+export declare const usePicker: <TValue, TDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TDate, TView, TSection, any, any, any>, TAdditionalProps extends {}>({ props, valueManager, valueType, wrapperVariant, inputRef, additionalViewProps, validator, autoFocusView, rendererInterceptor, }: UsePickerParams<TValue, TDate, TView, TSection, TExternalProps, TAdditionalProps>) => UsePickerResponse<TValue, TView, TSection, InferError<TExternalProps>>;

package/internals/hooks/usePicker/usePicker.js

@@ -11,7 +11,8 @@ export const usePicker = ({
   inputRef,
   additionalViewProps,
   validator,
-  autoFocusView
+  autoFocusView,
+  rendererInterceptor
 }) => {
   if (process.env.NODE_ENV !== 'production') {
     if (props.renderInput != null) {
@@ -30,7 +31,8 @@ export const usePicker = ({
     inputRef,
     additionalViewProps,
     autoFocusView,
-    propsFromPickerValue: pickerValueResponse.viewProps
+    propsFromPickerValue: pickerValueResponse.viewProps,
+    rendererInterceptor
   });
   const pickerLayoutResponse = usePickerLayoutProps({
     props,

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

@@ -10,7 +10,7 @@ export interface UsePickerBaseProps<TValue, TDate, TView extends DateOrTimeViewW
 }
 export interface UsePickerProps<TValue, TDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TError, TExternalProps extends UsePickerViewsProps<TValue, TDate, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueProps<TValue, TSection, TError>, UsePickerViewsProps<TValue, TDate, TView, TExternalProps, TAdditionalProps>, UsePickerLayoutProps {
 }
-export interface UsePickerParams<TValue, TDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TDate, TView, TSection, any, any, any>, TAdditionalProps extends {}> extends Pick<UsePickerValueParams<TValue, TDate, TSection, TExternalProps>, 'valueManager' | 'valueType' | 'wrapperVariant' | 'validator'>, Pick<UsePickerViewParams<TValue, TDate, TView, TExternalProps, TAdditionalProps>, 'additionalViewProps' | 'inputRef' | 'autoFocusView'> {
+export interface UsePickerParams<TValue, TDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TDate, TView, TSection, any, any, any>, TAdditionalProps extends {}> extends Pick<UsePickerValueParams<TValue, TDate, TSection, TExternalProps>, 'valueManager' | 'valueType' | 'wrapperVariant' | 'validator'>, Pick<UsePickerViewParams<TValue, TDate, TView, TExternalProps, TAdditionalProps>, 'additionalViewProps' | 'inputRef' | 'autoFocusView' | 'rendererInterceptor'> {
     props: TExternalProps;
 }
 export interface UsePickerResponse<TValue, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TError> extends Omit<UsePickerValueResponse<TValue, TSection, TError>, 'viewProps' | 'layoutProps'>, Omit<UsePickerViewsResponse<TView>, 'layoutProps'>, UsePickerLayoutPropsResponse<TValue, TView> {

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

@@ -13,7 +13,7 @@ export type PickerViewsRendererProps<TValue, TView extends DateOrTimeViewWithMer
     focusedView: TView | null;
     onFocusedViewChange: (viewToFocus: TView, hasFocus: boolean) => void;
 };
-type PickerViewRenderer<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<TView>, TAdditionalProps extends {}> = (props: PickerViewsRendererProps<TValue, TView, TExternalProps, TAdditionalProps>) => React.ReactNode;
+export type PickerViewRenderer<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<TView>, TAdditionalProps extends {}> = (props: PickerViewsRendererProps<TValue, TView, TExternalProps, TAdditionalProps>) => React.ReactNode;
 export type PickerViewRendererLookup<TValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<any>, TAdditionalProps extends {}> = {
     [K in TView]: PickerViewRenderer<TValue, K, TExternalProps, TAdditionalProps> | null;
 };
@@ -65,6 +65,15 @@ export interface UsePickerViewParams<TValue, TDate, TView extends DateOrTimeView
     additionalViewProps: TAdditionalProps;
     inputRef?: React.RefObject<HTMLInputElement>;
     autoFocusView: boolean;
+    /**
+     * A function that intercepts the regular picker rendering.
+     * Can be used to consume the provided `viewRenderers` and render a custom component wrapping them.
+     * @param {PickerViewRendererLookup<TValue, TView, TExternalProps, TAdditionalProps>} viewRenderers The `viewRenderers` that were provided to the picker component.
+     * @param {TView} popperView The current picker view.
+     * @param {any} rendererProps All the props that are being passed down to the renderer.
+     * @returns {React.ReactNode} A React node that will be rendered instead of the default renderer.
+     */
+    rendererInterceptor?: (viewRenderers: PickerViewRendererLookup<TValue, TView, TExternalProps, TAdditionalProps>, popperView: TView, rendererProps: Omit<TExternalProps, 'className' | 'sx'> & TAdditionalProps & UsePickerValueViewsResponse<TValue>) => React.ReactNode;
 }
 export interface UsePickerViewsResponse<TView extends DateOrTimeViewWithMeridiem> {
     /**
@@ -87,5 +96,5 @@ export interface UsePickerViewsLayoutResponse<TView extends DateOrTimeViewWithMe
  * - Handles the switch between UI views and field views
  * - Handles the focus management when switching views
  */
-export declare const usePickerViews: <TValue, TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TDate, TView, any, any>, TAdditionalProps extends {}>({ props, propsFromPickerValue, additionalViewProps, inputRef, autoFocusView, }: UsePickerViewParams<TValue, TDate, TView, TExternalProps, TAdditionalProps>) => UsePickerViewsResponse<TView>;
+export declare const usePickerViews: <TValue, TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TDate, TView, any, any>, TAdditionalProps extends {}>({ props, propsFromPickerValue, additionalViewProps, inputRef, autoFocusView, rendererInterceptor, }: UsePickerViewParams<TValue, TDate, TView, TExternalProps, TAdditionalProps>) => UsePickerViewsResponse<TView>;
 export {};