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

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

@@ -4,13 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateSections = exports.splitFormatIntoSections = exports.mergeDateIntoReferenceDate = exports.isAndroid = exports.getSectionsBoundaries = exports.getSectionVisibleValue = exports.getSectionOrder = exports.getLetterEditingOptions = exports.getDaysInWeekStr = exports.getDateSectionConfigFromFormatToken = exports.getDateFromDateSections = exports.doesSectionFormatHaveLeadingZeros = exports.createDateStrForInputFromSections = exports.cleanString = exports.cleanLeadingZeros = exports.cleanDigitSectionValue = exports.changeSectionValueFormat = exports.adjustSectionValue = exports.addPositionPropertiesToSections = void 0;
+exports.validateSections = exports.splitFormatIntoSections = exports.removeLocalizedDigits = exports.mergeDateIntoReferenceDate = exports.isStringNumber = exports.isAndroid = exports.getSectionsBoundaries = exports.getSectionVisibleValue = exports.getSectionOrder = exports.getLocalizedDigits = exports.getLetterEditingOptions = exports.getDaysInWeekStr = exports.getDateSectionConfigFromFormatToken = exports.getDateFromDateSections = exports.doesSectionFormatHaveLeadingZeros = exports.createDateStrForInputFromSections = exports.cleanString = exports.cleanLeadingZeros = exports.cleanDigitSectionValue = exports.changeSectionValueFormat = exports.applyLocalizedDigits = exports.adjustSectionValue = exports.addPositionPropertiesToSections = exports.FORMAT_SECONDS_NO_LEADING_ZEROS = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _dateUtils = require("../../utils/date-utils");
 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 {
@@ -74,8 +74,59 @@ const getLetterEditingOptions = (utils, timezone, sectionType, format) => {
       }
   }
 };
+
+// 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.
 exports.getLetterEditingOptions = getLetterEditingOptions;
-const cleanLeadingZeros = (utils, valueStr, size) => {
+const FORMAT_SECONDS_NO_LEADING_ZEROS = exports.FORMAT_SECONDS_NO_LEADING_ZEROS = 's';
+const NON_LOCALIZED_DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+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));
+};
+exports.getLocalizedDigits = getLocalizedDigits;
+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('');
+};
+exports.removeLocalizedDigits = removeLocalizedDigits;
+const applyLocalizedDigits = (valueStr, localizedDigits) => {
+  if (localizedDigits[0] === '0') {
+    return valueStr;
+  }
+  return valueStr.split('').map(char => localizedDigits[Number(char)]).join('');
+};
+exports.applyLocalizedDigits = applyLocalizedDigits;
+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.
+ */
+exports.isStringNumber = isStringNumber;
+const cleanLeadingZeros = (valueStr, size) => {
   let cleanValueStr = valueStr;
 
   // Remove the leading zeros
@@ -88,10 +139,10 @@ const cleanLeadingZeros = (utils, valueStr, size) => {
   return cleanValueStr;
 };
 exports.cleanLeadingZeros = cleanLeadingZeros;
-const cleanDigitSectionValue = (utils, timezone, value, sectionBoundaries, section) => {
+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'));
     }
   }
@@ -101,14 +152,14 @@ const cleanDigitSectionValue = (utils, timezone, value, sectionBoundaries, secti
   }
 
   // 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);
 };
 exports.cleanDigitSectionValue = cleanDigitSectionValue;
-const adjustSectionValue = (utils, timezone, section, keyCode, sectionsValueBoundaries, activeDate, stepsAttributes) => {
+const adjustSectionValue = (utils, timezone, section, keyCode, sectionsValueBoundaries, localizedDigits, activeDate, stepsAttributes) => {
   const delta = getDeltaFromKeyCode(keyCode);
   const isStart = keyCode === 'Home';
   const isEnd = keyCode === 'End';
@@ -119,9 +170,9 @@ const adjustSectionValue = (utils, timezone, section, keyCode, sectionsValueBoun
       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?.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) {
@@ -170,11 +221,11 @@ const adjustSectionValue = (utils, timezone, section, keyCode, sectionsValueBoun
   return adjustLetterSection();
 };
 exports.adjustSectionValue = adjustSectionValue;
-const getSectionVisibleValue = (section, target) => {
+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.
@@ -194,13 +245,13 @@ const getSectionVisibleValue = (section, target) => {
 exports.getSectionVisibleValue = getSectionVisibleValue;
 const cleanString = dirtyString => dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
 exports.cleanString = cleanString;
-const addPositionPropertiesToSections = (sections, isRTL) => {
+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;
@@ -355,7 +406,7 @@ const getEscapedPartsFromFormat = (utils, format) => {
   }
   return escapedParts;
 };
-const splitFormatIntoSections = (utils, timezone, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL) => {
+const splitFormatIntoSections = (utils, timezone, localeText, localizedDigits, format, date, formatDensity, shouldRespectLeadingZeros, isRTL) => {
   let startSeparator = '';
   const sections = [];
   const now = utils.date();
@@ -374,11 +425,11 @@ const splitFormatIntoSections = (utils, timezone, localeText, format, date, form
         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);
         }
       }
     }
@@ -405,7 +456,7 @@ const splitFormatIntoSections = (utils, timezone, localeText, format, date, form
     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;
@@ -480,7 +531,7 @@ const splitFormatIntoSections = (utils, timezone, localeText, format, date, form
  * To make sure that the parsing works, we are building a format and a date without any separator.
  */
 exports.splitFormatIntoSections = splitFormatIntoSections;
-const getDateFromDateSections = (utils, sections) => {
+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.
@@ -492,7 +543,7 @@ 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(' ');
@@ -500,9 +551,9 @@ const getDateFromDateSections = (utils, sections) => {
   return utils.parse(dateWithoutSeparatorStr, formatWithoutSeparator);
 };
 exports.getDateFromDateSections = getDateFromDateSections;
-const createDateStrForInputFromSections = (sections, isRTL) => {
+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('');
@@ -518,7 +569,7 @@ const createDateStrForInputFromSections = (sections, isRTL) => {
   return `\u2066${dateStr}\u2069`;
 };
 exports.createDateStrForInputFromSections = createDateStrForInputFromSections;
-const getSectionsBoundaries = (utils, timezone) => {
+const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
   const today = utils.date(undefined, timezone);
   const endOfYear = utils.endOfYear(today);
   const endOfDay = utils.endOfDay(today);
@@ -577,11 +628,11 @@ 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 {
@@ -623,7 +674,7 @@ 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/node/internals/hooks/useField/useFieldCharacterEditing.js

@@ -48,6 +48,7 @@ const useFieldCharacterEditing = ({
   sections,
   updateSectionValue,
   sectionsValueBoundaries,
+  localizedDigits,
   setTempAndroidValueStr,
   timezone
 }) => {
@@ -76,7 +77,7 @@ 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);
@@ -170,7 +171,8 @@ const useFieldCharacterEditing = ({
   };
   const applyNumericEditing = params => {
     const getNewSectionValue = (queryValue, section) => {
-      const queryValueNumber = Number(`${queryValue}`);
+      const cleanQueryValue = (0, _useField.removeLocalizedDigits)(queryValue, localizedDigits);
+      const queryValueNumber = Number(cleanQueryValue);
       const sectionBoundaries = sectionsValueBoundaries[section.type]({
         currentDate: null,
         format: section.format,
@@ -190,8 +192,8 @@ const useFieldCharacterEditing = ({
           saveQuery: true
         };
       }
-      const shouldGoToNextSection = Number(`${queryValue}0`) > sectionBoundaries.maximum || queryValue.length === sectionBoundaries.maximum.toString().length;
-      const newSectionValue = (0, _useField.cleanDigitSectionValue)(utils, timezone, queryValueNumber, sectionBoundaries, section);
+      const shouldGoToNextSection = queryValueNumber * 10 > sectionBoundaries.maximum || cleanQueryValue.length === sectionBoundaries.maximum.toString().length;
+      const newSectionValue = (0, _useField.cleanDigitSectionValue)(utils, queryValueNumber, sectionBoundaries, localizedDigits, section);
       return {
         sectionValue: newSectionValue,
         shouldGoToNextSection
@@ -239,12 +241,14 @@ const useFieldCharacterEditing = ({
         saveQuery: false
       };
     };
-    return applyQuery(params, getFirstSectionValueMatchingWithQuery, queryValue => !Number.isNaN(Number(queryValue)));
+    return applyQuery(params, getFirstSectionValueMatchingWithQuery, queryValue => (0, _useField.isStringNumber)(queryValue, localizedDigits));
   };
   const applyCharacterEditing = (0, _useEventCallback.default)(params => {
     const activeSection = sections[params.sectionIndex];
-    const isNumericEditing = !Number.isNaN(Number(params.keyPressed));
-    const response = isNumericEditing ? applyNumericEditing(params) : applyLetterEditing(params);
+    const isNumericEditing = (0, _useField.isStringNumber)(params.keyPressed, localizedDigits);
+    const response = isNumericEditing ? applyNumericEditing((0, _extends2.default)({}, params, {
+      keyPressed: (0, _useField.applyLocalizedDigits)(params.keyPressed, localizedDigits)
+    })) : applyLetterEditing(params);
     if (response == null) {
       setTempAndroidValueStr(null);
     } else {

package/node/internals/hooks/useField/useFieldState.js

@@ -51,9 +51,10 @@ const useFieldState = params => {
     onChange,
     valueManager
   });
-  const sectionsValueBoundaries = React.useMemo(() => (0, _useField.getSectionsBoundaries)(utils, timezone), [utils, timezone]);
-  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, date => (0, _useField.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(() => (0, _useField.getLocalizedDigits)(utils), [utils]);
+  const sectionsValueBoundaries = React.useMemo(() => (0, _useField.getSectionsBoundaries)(utils, localizedDigits, timezone), [utils, localizedDigits, timezone]);
+  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, localizedDigits, isRTL, date => (0, _useField.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);
     (0, _useField.validateSections)(sections, valueType);
@@ -151,7 +152,7 @@ const useFieldState = params => {
       value: newSectionValue,
       modified: true
     });
-    return (0, _useField.addPositionPropertiesToSections)(newSections, isRTL);
+    return (0, _useField.addPositionPropertiesToSections)(newSections, localizedDigits, isRTL);
   };
   const clearValue = () => {
     publishValue({
@@ -188,7 +189,7 @@ const useFieldState = params => {
       if (date == null || !utils.isValid(date)) {
         return null;
       }
-      const sections = (0, _useField.splitFormatIntoSections)(utils, timezone, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL);
+      const sections = (0, _useField.splitFormatIntoSections)(utils, timezone, localeText, localizedDigits, format, date, formatDensity, shouldRespectLeadingZeros, isRTL);
       return (0, _useField.mergeDateIntoReferenceDate)(utils, timezone, date, sections, referenceDate, false);
     };
     const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);
@@ -219,7 +220,7 @@ const useFieldState = params => {
     const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
     const newSections = setSectionValue(selectedSectionIndexes.startIndex, newSectionValue);
     const newActiveDateSections = activeDateManager.getSections(newSections);
-    const newActiveDate = (0, _useField.getDateFromDateSections)(utils, newActiveDateSections);
+    const newActiveDate = (0, _useField.getDateFromDateSections)(utils, newActiveDateSections, localizedDigits);
     let values;
     let shouldPublish;
 
@@ -287,6 +288,7 @@ const useFieldState = params => {
     updateValueFromValueStr,
     setTempAndroidValueStr,
     sectionsValueBoundaries,
+    localizedDigits,
     placeholder,
     timezone
   };

package/node/internals/hooks/usePicker/usePickerValue.js

@@ -146,12 +146,12 @@ 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/node/internals/hooks/useUtils.js

@@ -14,10 +14,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const useLocalizationContext = () => {
   const localization = React.useContext(_LocalizationProvider.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(() => (0, _extends2.default)({}, _enUS.DEFAULT_LOCALE, localization.localeText), [localization.localeText]);
   return React.useMemo(() => (0, _extends2.default)({}, localization, {

package/node/internals/hooks/useViews.js

@@ -24,11 +24,11 @@ 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;
       }
     }

package/node/internals/index.js

@@ -69,6 +69,12 @@ Object.defineProperty(exports, "applyDefaultDate", {
     return _dateUtils.applyDefaultDate;
   }
 });
+Object.defineProperty(exports, "applyDefaultViewProps", {
+  enumerable: true,
+  get: function () {
+    return _views.applyDefaultViewProps;
+  }
+});
 Object.defineProperty(exports, "areDatesEqual", {
   enumerable: true,
   get: function () {
@@ -111,6 +117,12 @@ Object.defineProperty(exports, "extractValidationProps", {
     return _extractValidationProps.extractValidationProps;
   }
 });
+Object.defineProperty(exports, "formatMeridiem", {
+  enumerable: true,
+  get: function () {
+    return _dateUtils.formatMeridiem;
+  }
+});
 Object.defineProperty(exports, "getActiveElement", {
   enumerable: true,
   get: function () {
@@ -129,6 +141,24 @@ Object.defineProperty(exports, "getTodayDate", {
     return _dateUtils.getTodayDate;
   }
 });
+Object.defineProperty(exports, "isDatePickerView", {
+  enumerable: true,
+  get: function () {
+    return _dateUtils.isDatePickerView;
+  }
+});
+Object.defineProperty(exports, "isTimeView", {
+  enumerable: true,
+  get: function () {
+    return _timeUtils.isTimeView;
+  }
+});
+Object.defineProperty(exports, "mergeDateAndTime", {
+  enumerable: true,
+  get: function () {
+    return _dateUtils.mergeDateAndTime;
+  }
+});
 Object.defineProperty(exports, "onSpaceOrEnter", {
   enumerable: true,
   get: function () {
@@ -171,6 +201,12 @@ Object.defineProperty(exports, "replaceInvalidDateByNull", {
     return _dateUtils.replaceInvalidDateByNull;
   }
 });
+Object.defineProperty(exports, "resolveTimeViewsResponse", {
+  enumerable: true,
+  get: function () {
+    return _dateTimeUtils.resolveTimeViewsResponse;
+  }
+});
 Object.defineProperty(exports, "splitFieldInternalAndForwardedProps", {
   enumerable: true,
   get: function () {
@@ -261,6 +297,12 @@ Object.defineProperty(exports, "useValidation", {
     return _useValidation.useValidation;
   }
 });
+Object.defineProperty(exports, "useViews", {
+  enumerable: true,
+  get: function () {
+    return _useViews.useViews;
+  }
+});
 Object.defineProperty(exports, "validateDate", {
   enumerable: true,
   get: function () {
@@ -295,10 +337,12 @@ var _useField = require("./hooks/useField");
 var _usePicker = require("./hooks/usePicker");
 var _useStaticPicker = require("./hooks/useStaticPicker");
 var _useUtils = require("./hooks/useUtils");
+var _useViews = require("./hooks/useViews");
 var _useValidation = require("./hooks/useValidation");
 var _dateHelpersHooks = require("./hooks/date-helpers-hooks");
 var _convertFieldResponseIntoMuiTextFieldProps = require("./utils/convertFieldResponseIntoMuiTextFieldProps");
 var _dateUtils = require("./utils/date-utils");
+var _dateTimeUtils = require("./utils/date-time-utils");
 var _fields = require("./utils/fields");
 var _getDefaultReferenceDate = require("./utils/getDefaultReferenceDate");
 var _utils = require("./utils/utils");
@@ -307,6 +351,8 @@ var _extractValidationProps = require("./utils/validation/extractValidationProps
 var _validateDate = require("./utils/validation/validateDate");
 var _validateDateTime = require("./utils/validation/validateDateTime");
 var _validateTime = require("./utils/validation/validateTime");
+var _views = require("./utils/views");
 var _warning = require("./utils/warning");
 var _DayCalendar = require("../DateCalendar/DayCalendar");
-var _useCalendarState = require("../DateCalendar/useCalendarState");
+var _useCalendarState = require("../DateCalendar/useCalendarState");
+var _timeUtils = require("./utils/time-utils");

package/node/internals/utils/valueManagers.js

@@ -37,12 +37,12 @@ const singleItemValueManager = exports.singleItemValueManager = {
 };
 const singleItemFieldValueManager = exports.singleItemFieldValueManager = {
   updateReferenceValue: (utils, value, prevReferenceValue) => value == null || !utils.isValid(value) ? prevReferenceValue : value,
-  getSectionsFromValue: (utils, date, prevSections, isRTL, getSectionsFromDate) => {
+  getSectionsFromValue: (utils, date, prevSections, localizedDigits, isRTL, getSectionsFromDate) => {
     const shouldReUsePrevDateSections = !utils.isValid(date) && !!prevSections;
     if (shouldReUsePrevDateSections) {
       return prevSections;
     }
-    return (0, _useField.addPositionPropertiesToSections)(getSectionsFromDate(date), isRTL);
+    return (0, _useField.addPositionPropertiesToSections)(getSectionsFromDate(date), localizedDigits, isRTL);
   },
   getValueStrFromSections: _useField.createDateStrForInputFromSections,
   getActiveDateManager: (utils, state) => ({

package/node/internals/utils/views.js

@@ -26,7 +26,7 @@ const applyDefaultViewProps = ({
   } else if (viewsWithDefault.length > 0) {
     openToWithDefault = viewsWithDefault[0];
   } else {
-    throw new Error('MUI: The `views` prop must contain at least one view');
+    throw new Error('MUI X: The `views` prop must contain at least one view.');
   }
   return {
     views: viewsWithDefault,

package/node/locales/index.js

@@ -36,6 +36,17 @@ Object.keys(_csCZ).forEach(function (key) {
     }
   });
 });
+var _daDK = require("./daDK");
+Object.keys(_daDK).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _daDK[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _daDK[key];
+    }
+  });
+});
 var _deDE = require("./deDE");
 Object.keys(_deDE).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "7.0.0-alpha.7",
+  "version": "7.0.0-alpha.9",
   "description": "The community edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -34,20 +34,20 @@
     "directory": "packages/x-date-pickers"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.7",
-    "@mui/base": "^5.0.0-beta.29",
-    "@mui/system": "^5.15.2",
-    "@mui/utils": "^5.15.2",
+    "@babel/runtime": "^7.23.8",
+    "@mui/base": "^5.0.0-beta.32",
+    "@mui/system": "^5.15.5",
+    "@mui/utils": "^5.15.5",
     "@types/react-transition-group": "^4.4.10",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.0",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.8.6",
-    "date-fns": "^2.25.0",
+    "@mui/material": "^5.15.0",
+    "date-fns": "^2.25.0 || ^3.2.0",
     "date-fns-jalali": "^2.13.0-0",
     "dayjs": "^1.10.7",
     "luxon": "^3.0.2",

package/themeAugmentation/components.d.ts

@@ -167,6 +167,32 @@ export interface PickerComponents<Theme = unknown> {
   MuiStaticDateTimePicker?: {
     defaultProps?: ComponentsProps['MuiStaticDateTimePicker'];
   };
+
+  // PickersTextField
+  MuiPickersTextField?: {
+    defaultProps?: ComponentsProps['MuiPickersTextField'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiPickersTextField'];
+  };
+  MuiPickersInputBase?: {
+    defaultProps?: ComponentsProps['MuiPickersInputBase'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiPickersInputBase'];
+  };
+  MuiPickersInput?: {
+    defaultProps?: ComponentsProps['MuiPickersInput'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiPickersInput'];
+  };
+  MuiPickersFilledInput?: {
+    defaultProps?: ComponentsProps['MuiPickersFilledInput'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiPickersFilledInput'];
+  };
+  MuiPickersOutlinedInput?: {
+    defaultProps?: ComponentsProps['MuiPickersOutlinedInput'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiPickersOutlinedInput'];
+  };
+  MuiPickersSectionList?: {
+    defaultProps?: ComponentsProps['MuiPickersSectionList'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiPickersSectionList'];
+  };
 }
 
 declare module '@mui/material/styles' {

package/themeAugmentation/overrides.d.ts

@@ -29,6 +29,14 @@ import {
   MultiSectionDigitalClockClassKey,
   MultiSectionDigitalClockSectionClassKey,
 } from '../MultiSectionDigitalClock';
+import {
+  PickersTextFieldClassKey,
+  PickersInputClassKey,
+  PickersOutlinedInputClassKey,
+  PickersFilledInputClassKey,
+  PickersInputBaseClassKey,
+} from '../PickersTextField';
+import { PickersSectionListClassKey } from '../PickersSectionList';
 
 // prettier-ignore
 export interface PickersComponentNameToClassKey {
@@ -60,6 +68,14 @@ export interface PickersComponentNameToClassKey {
   MuiTimeClock: TimeClockClassKey;
   MuiTimePickerToolbar: TimePickerToolbarClassKey;
   MuiYearCalendar: YearCalendarClassKey;
+
+  // V7 Picker's TextField
+  MuiPickersTextField: PickersTextFieldClassKey;
+  MuiPickersInputBase: PickersInputBaseClassKey
+  MuiPickersInput: PickersInputClassKey
+  MuiPickersFilledInput: PickersFilledInputClassKey
+  MuiPickersOutlinedInput: PickersOutlinedInputClassKey
+  MuiPickersSectionList: PickersSectionListClassKey
 }
 
 declare module '@mui/material/styles' {