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

package/node/{internals/components/PickersTextField → PickersTextField}/PickersTextField.js

@@ -8,23 +8,25 @@ exports.PickersTextField = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
 var _FormHelperText = _interopRequireDefault(require("@mui/material/FormHelperText"));
 var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
 var _pickersTextFieldClasses = require("./pickersTextFieldClasses");
-var _PickersOutlinedInput = require("../PickersInput/PickersOutlinedInput");
-var _PickersFilledInput = require("../PickersInput/PickersFilledInput");
-var _PickersStandardInput = require("../PickersInput/PickersStandardInput");
+var _PickersOutlinedInput = require("./PickersOutlinedInput");
+var _PickersFilledInput = require("./PickersFilledInput");
+var _PickersInput = require("./PickersInput");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["onFocus", "onBlur", "className", "color", "disabled", "error", "variant", "required", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const VARIANT_COMPONENT = {
-  standard: _PickersStandardInput.PickersStandardInput,
+  standard: _PickersInput.PickersInput,
   filled: _PickersFilledInput.PickersFilledInput,
   outlined: _PickersOutlinedInput.PickersOutlinedInput
 };
@@ -43,9 +45,13 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', focused && !disabled && 'focused', disabled && 'disabled', required && 'required']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _pickersTextFieldClasses.getPickersTextFieldUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _pickersTextFieldClasses.getPickersTextFieldUtilityClass, classes);
 };
-const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField(props, ref) {
+const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField(inProps, ref) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiPickersTextField'
+  });
   const {
       // Props used by FormControl
       onFocus,
@@ -86,7 +92,7 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootRef = React.useRef(null);
   const handleRootRef = (0, _useForkRef.default)(ref, rootRef);
-  const id = (0, _utils.unstable_useId)(idProp);
+  const id = (0, _useId.default)(idProp);
   const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
   const inputLabelId = label && id ? `${id}-label` : undefined;
   const ownerState = (0, _extends2.default)({}, props, {
@@ -143,4 +149,117 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
       children: helperText
     }))]
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? PickersTextField.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Is `true` if the current values equals the empty value.
+   * For a single item value, it means that `value === null`
+   * For a range value, it means that `value === [null, null]`
+   */
+  areAllSectionsEmpty: _propTypes.default.bool.isRequired,
+  className: _propTypes.default.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: _propTypes.default.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  component: _propTypes.default.elementType,
+  /**
+   * If true, the whole element is editable.
+   * Useful when all the sections are selected.
+   */
+  contentEditable: _propTypes.default.bool.isRequired,
+  disabled: _propTypes.default.bool.isRequired,
+  /**
+   * The elements to render.
+   * Each element contains the prop to edit a section of the value.
+   */
+  elements: _propTypes.default.arrayOf(_propTypes.default.shape({
+    after: _propTypes.default.object.isRequired,
+    before: _propTypes.default.object.isRequired,
+    container: _propTypes.default.object.isRequired,
+    content: _propTypes.default.object.isRequired
+  })).isRequired,
+  endAdornment: _propTypes.default.node,
+  error: _propTypes.default.bool.isRequired,
+  /**
+   * If `true`, the component is displayed in focused state.
+   */
+  focused: _propTypes.default.bool,
+  FormHelperTextProps: _propTypes.default.object,
+  fullWidth: _propTypes.default.bool,
+  /**
+   * The helper text content.
+   */
+  helperText: _propTypes.default.node,
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel: _propTypes.default.bool,
+  id: _propTypes.default.string,
+  InputLabelProps: _propTypes.default.object,
+  inputProps: _propTypes.default.object,
+  /**
+   * Props applied to the Input element.
+   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
+   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
+   * component depending on the `variant` prop value.
+   */
+  InputProps: _propTypes.default.object,
+  inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.object
+  })]),
+  label: _propTypes.default.node,
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin: _propTypes.default.oneOf(['dense', 'none', 'normal']),
+  onBlur: _propTypes.default.func.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  onClick: _propTypes.default.func.isRequired,
+  onFocus: _propTypes.default.func.isRequired,
+  onInput: _propTypes.default.func.isRequired,
+  onKeyDown: _propTypes.default.func.isRequired,
+  onPaste: _propTypes.default.func.isRequired,
+  readOnly: _propTypes.default.bool,
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   * @default false
+   */
+  required: _propTypes.default.bool,
+  sectionListRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      getRoot: _propTypes.default.func.isRequired,
+      getSectionContainer: _propTypes.default.func.isRequired,
+      getSectionContent: _propTypes.default.func.isRequired,
+      getSectionIndexFromDOMElement: _propTypes.default.func.isRequired
+    })
+  })]),
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: _propTypes.default.oneOf(['medium', 'small']),
+  startAdornment: _propTypes.default.node,
+  style: _propTypes.default.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  value: _propTypes.default.string.isRequired,
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: _propTypes.default.oneOf(['filled', 'outlined', 'standard'])
+} : void 0;

package/node/PickersTextField/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  PickersTextField: true,
+  pickersTextFieldClasses: true,
+  getPickersTextFieldUtilityClass: true
+};
+Object.defineProperty(exports, "PickersTextField", {
+  enumerable: true,
+  get: function () {
+    return _PickersTextField.PickersTextField;
+  }
+});
+Object.defineProperty(exports, "getPickersTextFieldUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _pickersTextFieldClasses.getPickersTextFieldUtilityClass;
+  }
+});
+Object.defineProperty(exports, "pickersTextFieldClasses", {
+  enumerable: true,
+  get: function () {
+    return _pickersTextFieldClasses.pickersTextFieldClasses;
+  }
+});
+var _PickersTextField = require("./PickersTextField");
+var _pickersTextFieldClasses = require("./pickersTextFieldClasses");
+var _PickersInput = require("./PickersInput");
+Object.keys(_PickersInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PickersInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PickersInput[key];
+    }
+  });
+});
+var _PickersFilledInput = require("./PickersFilledInput");
+Object.keys(_PickersFilledInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PickersFilledInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PickersFilledInput[key];
+    }
+  });
+});
+var _PickersOutlinedInput = require("./PickersOutlinedInput");
+Object.keys(_PickersOutlinedInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PickersOutlinedInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PickersOutlinedInput[key];
+    }
+  });
+});
+var _PickersInputBase = require("./PickersInputBase");
+Object.keys(_PickersInputBase).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PickersInputBase[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PickersInputBase[key];
+    }
+  });
+});

package/node/StaticDatePicker/StaticDatePicker.js

@@ -68,9 +68,6 @@ StaticDatePicker.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,
   /**
    * Formats the day of week displayed in the calendar header.

package/node/StaticDateTimePicker/StaticDateTimePicker.js

@@ -88,9 +88,6 @@ StaticDateTimePicker.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,
   /**
    * Formats the day of week displayed in the calendar header.

package/node/StaticTimePicker/StaticTimePicker.js

@@ -80,9 +80,6 @@ StaticTimePicker.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,
   /**
    * The default value.

package/node/TimePicker/TimePicker.js

@@ -74,9 +74,6 @@ process.env.NODE_ENV !== "production" ? TimePicker.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/TimePicker/TimePickerToolbar.js

@@ -222,9 +222,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
   ampm: _propTypes.default.bool,
   ampmInClock: _propTypes.default.bool,
   classes: _propTypes.default.object,
-  /**
-   * className applied to the root component.
-   */
   className: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   /**

package/node/YearCalendar/YearCalendar.js

@@ -273,9 +273,6 @@ process.env.NODE_ENV !== "production" ? YearCalendar.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/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.0.0-alpha.8
+ * @mui/x-date-pickers v7.0.0-alpha.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -79,15 +79,15 @@ Object.keys(_PickersDay).forEach(function (key) {
     }
   });
 });
-var _locales = require("./locales");
-Object.keys(_locales).forEach(function (key) {
+var _pickersLocaleTextApi = require("./locales/utils/pickersLocaleTextApi");
+Object.keys(_pickersLocaleTextApi).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _locales[key]) return;
+  if (key in exports && exports[key] === _pickersLocaleTextApi[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _locales[key];
+      return _pickersLocaleTextApi[key];
     }
   });
 });
@@ -391,6 +391,18 @@ Object.keys(_PickersCalendarHeader).forEach(function (key) {
     }
   });
 });
+var _PickersTextField = require("./PickersTextField");
+Object.keys(_PickersTextField).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PickersTextField[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PickersTextField[key];
+    }
+  });
+});
 var _PickersSectionList = require("./PickersSectionList");
 Object.keys(_PickersSectionList).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -33,6 +33,7 @@ const useField = params => {
     updateValueFromValueStr,
     setTempAndroidValueStr,
     sectionsValueBoundaries,
+    localizedDigits,
     placeholder,
     timezone
   } = (0, _useFieldState.useFieldState)(params);
@@ -68,6 +69,7 @@ const useField = params => {
     sections: state.sections,
     updateSectionValue,
     sectionsValueBoundaries,
+    localizedDigits,
     setTempAndroidValueStr,
     timezone
   });
@@ -199,7 +201,7 @@ const useField = params => {
     if (selectedSectionIndexes.startIndex === 0 && selectedSectionIndexes.endIndex === state.sections.length - 1 && cleanValueStr.length === 1) {
       keyPressed = cleanValueStr;
     } else {
-      const prevValueStr = (0, _useField.cleanString)(fieldValueManager.getValueStrFromSections(state.sections, isRTL));
+      const prevValueStr = (0, _useField.cleanString)(fieldValueManager.getValueStrFromSections(state.sections, localizedDigits, isRTL));
       let startOfDiffIndex = -1;
       let endOfDiffIndex = -1;
       for (let i = 0; i < prevValueStr.length; i += 1) {
@@ -309,7 +311,7 @@ const useField = params => {
           }
           const activeSection = state.sections[selectedSectionIndexes.startIndex];
           const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
-          const newSectionValue = (0, _useField.adjustSectionValue)(utils, timezone, activeSection, event.key, sectionsValueBoundaries, activeDateManager.date, {
+          const newSectionValue = (0, _useField.adjustSectionValue)(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, activeDateManager.date, {
             minutesStep
           });
           updateSectionValue({
@@ -392,7 +394,7 @@ const useField = params => {
     }
   }, [state.tempValueStrAndroid]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const valueStr = React.useMemo(() => state.tempValueStrAndroid ?? fieldValueManager.getValueStrFromSections(state.sections, isRTL), [state.sections, fieldValueManager, state.tempValueStrAndroid, isRTL]);
+  const valueStr = React.useMemo(() => state.tempValueStrAndroid ?? fieldValueManager.getValueStrFromSections(state.sections, localizedDigits, isRTL), [state.sections, fieldValueManager, state.tempValueStrAndroid, localizedDigits, isRTL]);
   const inputMode = React.useMemo(() => {
     if (selectedSectionIndexes == null) {
       return 'text';

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

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