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

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

@@ -72,7 +72,58 @@ export var getLetterEditingOptions = function getLetterEditingOptions(utils, tim
       }
   }
 };
-export var cleanLeadingZeros = function 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 var FORMAT_SECONDS_NO_LEADING_ZEROS = 's';
+var NON_LOCALIZED_DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+export var getLocalizedDigits = function getLocalizedDigits(utils) {
+  var today = utils.date(undefined);
+  var 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(function (_, index) {
+    return utils.formatByString(utils.setSeconds(today, index), FORMAT_SECONDS_NO_LEADING_ZEROS);
+  });
+};
+export var removeLocalizedDigits = function removeLocalizedDigits(valueStr, localizedDigits) {
+  if (localizedDigits[0] === '0') {
+    return valueStr;
+  }
+  var digits = [];
+  var currentFormattedDigit = '';
+  for (var i = 0; i < valueStr.length; i += 1) {
+    currentFormattedDigit += valueStr[i];
+    var matchingDigitIndex = localizedDigits.indexOf(currentFormattedDigit);
+    if (matchingDigitIndex > -1) {
+      digits.push(matchingDigitIndex.toString());
+      currentFormattedDigit = '';
+    }
+  }
+  return digits.join('');
+};
+export var applyLocalizedDigits = function applyLocalizedDigits(valueStr, localizedDigits) {
+  if (localizedDigits[0] === '0') {
+    return valueStr;
+  }
+  return valueStr.split('').map(function (char) {
+    return localizedDigits[Number(char)];
+  }).join('');
+};
+export var isStringNumber = function isStringNumber(valueStr, localizedDigits) {
+  var 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 var cleanLeadingZeros = function cleanLeadingZeros(valueStr, size) {
   var cleanValueStr = valueStr;
 
   // Remove the leading zeros
@@ -84,7 +135,7 @@ export var cleanLeadingZeros = function cleanLeadingZeros(utils, valueStr, size)
   }
   return cleanValueStr;
 };
-export var cleanDigitSectionValue = function cleanDigitSectionValue(utils, timezone, value, sectionBoundaries, section) {
+export var cleanDigitSectionValue = function 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 \"".concat(section.format, "\" is a digit format with letter in it.'\n             This type of format is only supported for 'day' sections")].join('\n'));
@@ -98,11 +149,11 @@ export var cleanDigitSectionValue = function cleanDigitSectionValue(utils, timez
   // queryValue without leading `0` (`01` => `1`)
   var valueStr = value.toString();
   if (section.hasLeadingZerosInInput) {
-    return cleanLeadingZeros(utils, valueStr, section.maxLength);
+    valueStr = cleanLeadingZeros(valueStr, section.maxLength);
   }
-  return valueStr;
+  return applyLocalizedDigits(valueStr, localizedDigits);
 };
-export var adjustSectionValue = function adjustSectionValue(utils, timezone, section, keyCode, sectionsValueBoundaries, activeDate, stepsAttributes) {
+export var adjustSectionValue = function adjustSectionValue(utils, timezone, section, keyCode, sectionsValueBoundaries, localizedDigits, activeDate, stepsAttributes) {
   var delta = getDeltaFromKeyCode(keyCode);
   var isStart = keyCode === 'Home';
   var isEnd = keyCode === 'End';
@@ -114,10 +165,10 @@ export var adjustSectionValue = function adjustSectionValue(utils, timezone, sec
       contentType: section.contentType
     });
     var getCleanValue = function getCleanValue(value) {
-      return cleanDigitSectionValue(utils, timezone, value, sectionBoundaries, section);
+      return cleanDigitSectionValue(utils, value, sectionBoundaries, localizedDigits, section);
     };
     var step = section.type === 'minutes' && stepsAttributes != null && stepsAttributes.minutesStep ? stepsAttributes.minutesStep : 1;
-    var currentSectionValue = parseInt(section.value, 10);
+    var currentSectionValue = parseInt(removeLocalizedDigits(section.value, localizedDigits), 10);
     var newSectionValueNumber = currentSectionValue + delta * step;
     if (shouldSetAbsolute) {
       if (section.type === 'year' && !isEnd && !isStart) {
@@ -165,11 +216,11 @@ export var adjustSectionValue = function adjustSectionValue(utils, timezone, sec
   }
   return adjustLetterSection();
 };
-export var getSectionVisibleValue = function getSectionVisibleValue(section, target) {
+export var getSectionVisibleValue = function getSectionVisibleValue(section, target, localizedDigits) {
   var value = section.value || section.placeholder;
   var 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.
@@ -189,13 +240,13 @@ export var getSectionVisibleValue = function getSectionVisibleValue(section, tar
 export var cleanString = function cleanString(dirtyString) {
   return dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
 };
-export var addPositionPropertiesToSections = function addPositionPropertiesToSections(sections, isRTL) {
+export var addPositionPropertiesToSections = function addPositionPropertiesToSections(sections, localizedDigits, isRTL) {
   var position = 0;
   var positionInInput = isRTL ? 1 : 0;
   var newSections = [];
   for (var i = 0; i < sections.length; i += 1) {
     var section = sections[i];
-    var renderedValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr');
+    var renderedValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr', localizedDigits);
     var sectionStr = "".concat(section.startSeparator).concat(renderedValue).concat(section.endSeparator);
     var sectionLength = cleanString(sectionStr).length;
     var sectionLengthInInput = sectionStr.length;
@@ -348,7 +399,7 @@ var getEscapedPartsFromFormat = function getEscapedPartsFromFormat(utils, format
   }
   return escapedParts;
 };
-export var splitFormatIntoSections = function splitFormatIntoSections(utils, timezone, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL) {
+export var splitFormatIntoSections = function splitFormatIntoSections(utils, timezone, localeText, localizedDigits, format, date, formatDensity, shouldRespectLeadingZeros, isRTL) {
   var startSeparator = '';
   var sections = [];
   var now = utils.date();
@@ -371,7 +422,7 @@ export var splitFormatIntoSections = function splitFormatIntoSections(utils, tim
         }
         maxLength = sectionConfig.maxLength;
         if (isValidDate) {
-          sectionValue = cleanLeadingZeros(utils, sectionValue, maxLength);
+          sectionValue = applyLocalizedDigits(cleanLeadingZeros(removeLocalizedDigits(sectionValue, localizedDigits), maxLength), localizedDigits);
         }
       }
     }
@@ -480,7 +531,7 @@ export var splitFormatIntoSections = function splitFormatIntoSections(utils, tim
  * 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 var getDateFromDateSections = function getDateFromDateSections(utils, sections) {
+export var getDateFromDateSections = function 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.
@@ -494,16 +545,16 @@ export var getDateFromDateSections = function getDateFromDateSections(utils, sec
     var shouldSkip = shouldSkipWeekDays && section.type === 'weekDay';
     if (!shouldSkip) {
       sectionFormats.push(section.format);
-      sectionValues.push(getSectionVisibleValue(section, 'non-input'));
+      sectionValues.push(getSectionVisibleValue(section, 'non-input', localizedDigits));
     }
   }
   var formatWithoutSeparator = sectionFormats.join(' ');
   var dateWithoutSeparatorStr = sectionValues.join(' ');
   return utils.parse(dateWithoutSeparatorStr, formatWithoutSeparator);
 };
-export var createDateStrForInputFromSections = function createDateStrForInputFromSections(sections, isRTL) {
+export var createDateStrForInputFromSections = function createDateStrForInputFromSections(sections, localizedDigits, isRTL) {
   var formattedSections = sections.map(function (section) {
-    var dateValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr');
+    var dateValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr', localizedDigits);
     return "".concat(section.startSeparator).concat(dateValue).concat(section.endSeparator);
   });
   var dateStr = formattedSections.join('');
@@ -518,7 +569,7 @@ export var createDateStrForInputFromSections = function createDateStrForInputFro
   // wrap into an isolated group such that separators can split the string in smaller ones by adding \u2069\u2068
   return "\u2066".concat(dateStr, "\u2069");
 };
-export var getSectionsBoundaries = function getSectionsBoundaries(utils, timezone) {
+export var getSectionsBoundaries = function getSectionsBoundaries(utils, localizedDigits, timezone) {
   var today = utils.date(undefined, timezone);
   var endOfYear = utils.endOfYear(today);
   var endOfDay = utils.endOfDay(today);
@@ -578,11 +629,11 @@ export var getSectionsBoundaries = function getSectionsBoundaries(utils, timezon
     hours: function hours(_ref4) {
       var format = _ref4.format;
       var lastHourInDay = utils.getHours(endOfDay);
-      var hasMeridiem = utils.formatByString(utils.endOfDay(today), format) !== lastHourInDay.toString();
+      var 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/legacy/internals/hooks/useField/useFieldCharacterEditing.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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`.
@@ -43,6 +43,7 @@ export var useFieldCharacterEditing = function useFieldCharacterEditing(_ref) {
   var sections = _ref.sections,
     updateSectionValue = _ref.updateSectionValue,
     sectionsValueBoundaries = _ref.sectionsValueBoundaries,
+    localizedDigits = _ref.localizedDigits,
     setTempAndroidValueStr = _ref.setTempAndroidValueStr,
     timezone = _ref.timezone;
   var utils = useUtils();
@@ -77,7 +78,7 @@ export var useFieldCharacterEditing = function useFieldCharacterEditing(_ref) {
     var 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) {
       var concatenatedQueryValue = "".concat(query.value).concat(cleanKeyPressed);
       var _queryResponse = getFirstSectionValueMatchingWithQuery(concatenatedQueryValue, activeSection);
@@ -179,7 +180,8 @@ export var useFieldCharacterEditing = function useFieldCharacterEditing(_ref) {
   };
   var applyNumericEditing = function applyNumericEditing(params) {
     var getNewSectionValue = function getNewSectionValue(queryValue, section) {
-      var queryValueNumber = Number("".concat(queryValue));
+      var cleanQueryValue = removeLocalizedDigits(queryValue, localizedDigits);
+      var queryValueNumber = Number(cleanQueryValue);
       var sectionBoundaries = sectionsValueBoundaries[section.type]({
         currentDate: null,
         format: section.format,
@@ -199,8 +201,8 @@ export var useFieldCharacterEditing = function useFieldCharacterEditing(_ref) {
           saveQuery: true
         };
       }
-      var shouldGoToNextSection = Number("".concat(queryValue, "0")) > sectionBoundaries.maximum || queryValue.length === sectionBoundaries.maximum.toString().length;
-      var newSectionValue = cleanDigitSectionValue(utils, timezone, queryValueNumber, sectionBoundaries, section);
+      var shouldGoToNextSection = queryValueNumber * 10 > sectionBoundaries.maximum || cleanQueryValue.length === sectionBoundaries.maximum.toString().length;
+      var newSectionValue = cleanDigitSectionValue(utils, queryValueNumber, sectionBoundaries, localizedDigits, section);
       return {
         sectionValue: newSectionValue,
         shouldGoToNextSection: shouldGoToNextSection
@@ -249,13 +251,15 @@ export var useFieldCharacterEditing = function useFieldCharacterEditing(_ref) {
       };
     };
     return applyQuery(params, getFirstSectionValueMatchingWithQuery, function (queryValue) {
-      return !Number.isNaN(Number(queryValue));
+      return isStringNumber(queryValue, localizedDigits);
     });
   };
   var applyCharacterEditing = useEventCallback(function (params) {
     var activeSection = sections[params.sectionIndex];
-    var isNumericEditing = !Number.isNaN(Number(params.keyPressed));
-    var response = isNumericEditing ? applyNumericEditing(params) : applyLetterEditing(params);
+    var isNumericEditing = isStringNumber(params.keyPressed, localizedDigits);
+    var response = isNumericEditing ? applyNumericEditing(_extends({}, params, {
+      keyPressed: applyLocalizedDigits(params.keyPressed, localizedDigits)
+    })) : applyLetterEditing(params);
     if (response == null) {
       setTempAndroidValueStr(null);
     } else {

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

@@ -5,7 +5,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 var useFieldState = function useFieldState(params) {
@@ -42,18 +42,21 @@ export var useFieldState = function useFieldState(params) {
     timezone = _useValueWithTimezone.timezone,
     valueFromTheOutside = _useValueWithTimezone.value,
     handleValueChange = _useValueWithTimezone.handleValueChange;
+  var localizedDigits = React.useMemo(function () {
+    return getLocalizedDigits(utils);
+  }, [utils]);
   var sectionsValueBoundaries = React.useMemo(function () {
-    return getSectionsBoundaries(utils, timezone);
-  }, [utils, timezone]);
+    return getSectionsBoundaries(utils, localizedDigits, timezone);
+  }, [utils, localizedDigits, timezone]);
   var getSectionsFromValue = React.useCallback(function (value) {
     var fallbackSections = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    return fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, function (date) {
-      return splitFormatIntoSections(utils, timezone, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL);
+    return fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, localizedDigits, isRTL, function (date) {
+      return splitFormatIntoSections(utils, timezone, localeText, localizedDigits, format, date, formatDensity, shouldRespectLeadingZeros, isRTL);
     });
-  }, [fieldValueManager, format, localeText, isRTL, shouldRespectLeadingZeros, utils, formatDensity, timezone]);
+  }, [fieldValueManager, format, localeText, localizedDigits, isRTL, shouldRespectLeadingZeros, utils, formatDensity, timezone]);
   var placeholder = React.useMemo(function () {
-    return fieldValueManager.getValueStrFromSections(getSectionsFromValue(valueManager.emptyValue), isRTL);
-  }, [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, isRTL]);
+    return fieldValueManager.getValueStrFromSections(getSectionsFromValue(valueManager.emptyValue), localizedDigits, isRTL);
+  }, [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, localizedDigits, isRTL]);
   var _React$useState = React.useState(function () {
       var sections = getSectionsFromValue(valueFromTheOutside);
       validateSections(sections, valueType);
@@ -162,7 +165,7 @@ export var useFieldState = function useFieldState(params) {
       value: newSectionValue,
       modified: true
     });
-    return addPositionPropertiesToSections(newSections, isRTL);
+    return addPositionPropertiesToSections(newSections, localizedDigits, isRTL);
   };
   var clearValue = function clearValue() {
     publishValue({
@@ -203,7 +206,7 @@ export var useFieldState = function useFieldState(params) {
       if (date == null || !utils.isValid(date)) {
         return null;
       }
-      var sections = splitFormatIntoSections(utils, timezone, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL);
+      var sections = splitFormatIntoSections(utils, timezone, localeText, localizedDigits, format, date, formatDensity, shouldRespectLeadingZeros, isRTL);
       return mergeDateIntoReferenceDate(utils, timezone, date, sections, referenceDate, false);
     };
     var newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);
@@ -233,7 +236,7 @@ export var useFieldState = function useFieldState(params) {
     var activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
     var newSections = setSectionValue(selectedSectionIndexes.startIndex, newSectionValue);
     var newActiveDateSections = activeDateManager.getSections(newSections);
-    var newActiveDate = getDateFromDateSections(utils, newActiveDateSections);
+    var newActiveDate = getDateFromDateSections(utils, newActiveDateSections, localizedDigits);
     var values;
     var shouldPublish;
 
@@ -311,6 +314,7 @@ export var useFieldState = function useFieldState(params) {
     updateValueFromValueStr: updateValueFromValueStr,
     setTempAndroidValueStr: setTempAndroidValueStr,
     sectionsValueBoundaries: sectionsValueBoundaries,
+    localizedDigits: localizedDigits,
     placeholder: placeholder,
     timezone: timezone
   };

package/legacy/internals/utils/valueManagers.js

@@ -38,12 +38,12 @@ export var singleItemFieldValueManager = {
   updateReferenceValue: function updateReferenceValue(utils, value, prevReferenceValue) {
     return value == null || !utils.isValid(value) ? prevReferenceValue : value;
   },
-  getSectionsFromValue: function getSectionsFromValue(utils, date, prevSections, isRTL, getSectionsFromDate) {
+  getSectionsFromValue: function getSectionsFromValue(utils, date, prevSections, localizedDigits, isRTL, getSectionsFromDate) {
     var shouldReUsePrevDateSections = !utils.isValid(date) && !!prevSections;
     if (shouldReUsePrevDateSections) {
       return prevSections;
     }
-    return addPositionPropertiesToSections(getSectionsFromDate(date), isRTL);
+    return addPositionPropertiesToSections(getSectionsFromDate(date), localizedDigits, isRTL);
   },
   getValueStrFromSections: createDateStrForInputFromSections,
   getActiveDateManager: function getActiveDateManager(utils, state) {

package/modern/AdapterLuxon/AdapterLuxon.js

@@ -337,10 +337,7 @@ export class AdapterLuxon {
       return value.startOf('month');
     };
     this.startOfWeek = value => {
-      return value.startOf('week',
-      // TODO: remove when `@types/luxon` add support for the parameter.
-      // @ts-ignore
-      {
+      return value.startOf('week', {
         useLocaleWeeks: true
       });
     };
@@ -354,10 +351,7 @@ export class AdapterLuxon {
       return value.endOf('month');
     };
     this.endOfWeek = value => {
-      return value.endOf('week',
-      // TODO: remove when `@types/luxon` add support for the parameter.
-      // @ts-ignore
-      {
+      return value.endOf('week', {
         useLocaleWeeks: true
       });
     };
@@ -479,9 +473,7 @@ export class AdapterLuxon {
       return weeks;
     };
     this.getWeekNumber = value => {
-      // TODO: remove when `@types/luxon` add support for the parameter.
-      // @ts-ignore
-      return value.localeWeekNumber ?? value.weekNumber;
+      return value.localWeekNumber ?? value.weekNumber;
     };
     this.getYearRange = ([start, end]) => {
       const startDate = this.startOfYear(start);

package/modern/DatePicker/DatePicker.js

@@ -55,9 +55,6 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/modern/DatePicker/DatePickerToolbar.js

@@ -93,9 +93,6 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
-  /**
-   * className applied to the root component.
-   */
   className: PropTypes.string,
   disabled: PropTypes.bool,
   /**

package/modern/DateTimePicker/DateTimePicker.js

@@ -65,9 +65,6 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/modern/DateTimePicker/DateTimePickerToolbar.js

@@ -308,9 +308,6 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-  /**
-   * className applied to the root component.
-   */
   className: PropTypes.string,
   disabled: PropTypes.bool,
   /**

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -76,9 +76,6 @@ DesktopDatePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -124,9 +124,6 @@ DesktopDateTimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/modern/DesktopTimePicker/DesktopTimePicker.js

@@ -107,9 +107,6 @@ DesktopTimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/modern/MobileDatePicker/MobileDatePicker.js

@@ -73,9 +73,6 @@ MobileDatePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -93,9 +93,6 @@ MobileDateTimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/modern/MobileTimePicker/MobileTimePicker.js

@@ -86,9 +86,6 @@ MobileTimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/modern/MonthCalendar/MonthCalendar.js

@@ -239,9 +239,6 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-  /**
-   * className applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * The default selected value.

package/modern/PickersCalendarHeader/PickersCalendarHeader.js

@@ -230,9 +230,6 @@ process.env.NODE_ENV !== "production" ? PickersCalendarHeader.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-  /**
-   * className applied to the root element.
-   */
   className: PropTypes.string,
   currentMonth: PropTypes.any.isRequired,
   disabled: PropTypes.bool,

package/modern/PickersSectionList/PickersSectionList.js

@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import useForkRef from '@mui/utils/useForkRef';
+import { useThemeProps } from '@mui/material/styles';
 import { getPickersSectionListUtilityClass, pickersSectionListClasses } from './pickersSectionListClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -104,7 +105,11 @@ function PickersSection(props) {
     children: [/*#__PURE__*/_jsx(SectionSeparator, _extends({}, sectionSeparatorBeforeProps)), /*#__PURE__*/_jsx(SectionContent, _extends({}, sectionContentProps)), /*#__PURE__*/_jsx(SectionSeparator, _extends({}, sectionSeparatorAfterProps))]
   }));
 }
-const PickersSectionList = /*#__PURE__*/React.forwardRef(function PickersSectionList(props, ref) {
+const PickersSectionList = /*#__PURE__*/React.forwardRef(function PickersSectionList(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickersSectionList'
+  });
   const {
       slots,
       slotProps,