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

package/modern/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?.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/modern/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
 }) => {
@@ -68,7 +69,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);
@@ -162,7 +163,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,
@@ -182,8 +184,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
@@ -231,12 +233,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/modern/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/modern/internals/utils/valueManagers.js

@@ -30,12 +30,12 @@ export const singleItemValueManager = {
 };
 export const 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 addPositionPropertiesToSections(getSectionsFromDate(date), isRTL);
+    return addPositionPropertiesToSections(getSectionsFromDate(date), localizedDigits, isRTL);
   },
   getValueStrFromSections: createDateStrForInputFromSections,
   getActiveDateManager: (utils, state) => ({

package/node/AdapterLuxon/AdapterLuxon.js

@@ -345,10 +345,7 @@ 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
       });
     };
@@ -362,10 +359,7 @@ 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
       });
     };
@@ -487,9 +481,7 @@ 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/node/DatePicker/DatePicker.js

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

package/node/DatePicker/DatePickerToolbar.js

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

package/node/DateTimePicker/DateTimePicker.js

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

package/node/DateTimePicker/DateTimePickerToolbar.js

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

package/node/DesktopDatePicker/DesktopDatePicker.js

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

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

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

package/node/DesktopTimePicker/DesktopTimePicker.js

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

package/node/MobileDatePicker/MobileDatePicker.js

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

package/node/MobileDateTimePicker/MobileDateTimePicker.js

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

package/node/MobileTimePicker/MobileTimePicker.js

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

package/node/MonthCalendar/MonthCalendar.js

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

package/node/PickersCalendarHeader/PickersCalendarHeader.js

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

package/node/PickersSectionList/PickersSectionList.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _styles = require("@mui/material/styles");
 var _pickersSectionListClasses = require("./pickersSectionListClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "elements", "sectionListRef"];
@@ -112,7 +113,11 @@ function PickersSection(props) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionSeparator, (0, _extends2.default)({}, sectionSeparatorBeforeProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(SectionContent, (0, _extends2.default)({}, sectionContentProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(SectionSeparator, (0, _extends2.default)({}, sectionSeparatorAfterProps))]
   }));
 }
-const PickersSectionList = exports.PickersSectionList = /*#__PURE__*/React.forwardRef(function PickersSectionList(props, ref) {
+const PickersSectionList = exports.PickersSectionList = /*#__PURE__*/React.forwardRef(function PickersSectionList(inProps, ref) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiPickersSectionList'
+  });
   const {
       slots,
       slotProps,