@mui/x-date-pickers 6.0.2 → 6.0.4

package/legacy/TimeField/useTimeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm"];
+var _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
 import { validateTime } from '../internals/hooks/validation/useTimeValidation';
@@ -37,6 +37,7 @@ export var useTimeField = function useTimeField(_ref) {
     selectedSections = _useDefaultizedTimeFi.selectedSections,
     onSelectedSectionsChange = _useDefaultizedTimeFi.onSelectedSectionsChange,
     ampm = _useDefaultizedTimeFi.ampm,
+    unstableFieldRef = _useDefaultizedTimeFi.unstableFieldRef,
     other = _objectWithoutProperties(_useDefaultizedTimeFi, _excluded);
   return useField({
     inputRef: inputRef,
@@ -58,7 +59,8 @@ export var useTimeField = function useTimeField(_ref) {
       disableIgnoringDatePartForTimeValidation: disableIgnoringDatePartForTimeValidation,
       selectedSections: selectedSections,
       onSelectedSectionsChange: onSelectedSectionsChange,
-      ampm: ampm
+      ampm: ampm,
+      unstableFieldRef: unstableFieldRef
     },
     valueManager: singleItemValueManager,
     fieldValueManager: singleItemFieldValueManager,

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.0.2
+ * @mui/x-date-pickers v6.0.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -14,6 +14,7 @@ export * from './locales';
 export * from './DateField';
 export * from './TimeField';
 export * from './DateTimeField';
+
 // Calendars
 export * from './DateCalendar';
 export * from './MonthCalendar';
@@ -42,4 +43,5 @@ export * from './timeViewRenderers';
 export * from './PickersLayout';
 export * from './PickersActionBar';
 export * from './PickersShortcuts';
-export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
+export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
+export * from './models';

package/legacy/internals/demo/DemoContainer.js

@@ -95,12 +95,18 @@ export function DemoContainer(props) {
   if (childrenTypes.has('UI-view')) {
     // noop
   } else if (childrenTypes.has('single-input-range-field')) {
-    sx = _extends({}, sx, _defineProperty({}, "& > .".concat(textFieldClasses.root), {
-      minWidth: {
-        xs: 300,
-        md: 400
-      }
-    }));
+    if (!childrenSupportedSections.has('date-time')) {
+      sx = _extends({}, sx, _defineProperty({}, "& > .".concat(textFieldClasses.root), {
+        minWidth: 300
+      }));
+    } else {
+      sx = _extends({}, sx, _defineProperty({}, "& > .".concat(textFieldClasses.root), {
+        minWidth: {
+          xs: 300,
+          md: 400
+        }
+      }));
+    }
   } else if (childrenSupportedSections.has('date-time')) {
     sx = _extends({}, sx, _defineProperty({}, "& > .".concat(textFieldClasses.root), {
       minWidth: 270

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

@@ -1,2 +1,2 @@
 export { useField } from './useField';
-export { splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections, getSectionOrder } from './useField.utils';
+export { splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections } from './useField.utils';

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

@@ -6,9 +6,10 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
+import { useTheme } from '@mui/material/styles';
 import { useValidation } from '../validation/useValidation';
 import { useUtils } from '../useUtils';
-import { adjustSectionValue, isAndroid, cleanString } from './useField.utils';
+import { adjustSectionValue, isAndroid, cleanString, getSectionOrder } from './useField.utils';
 import { useFieldState } from './useFieldState';
 import { useFieldCharacterEditing } from './useFieldCharacterEditing';
 import { getActiveElement } from '../../utils/utils';
@@ -17,14 +18,14 @@ export var useField = function useField(params) {
   var _useFieldState = useFieldState(params),
     state = _useFieldState.state,
     selectedSectionIndexes = _useFieldState.selectedSectionIndexes,
-    setSelectedSections = _useFieldState.setSelectedSections,
+    _setSelectedSections = _useFieldState.setSelectedSections,
     clearValue = _useFieldState.clearValue,
     clearActiveSection = _useFieldState.clearActiveSection,
     updateSectionValue = _useFieldState.updateSectionValue,
     updateValueFromValueStr = _useFieldState.updateValueFromValueStr,
     setTempAndroidValueStr = _useFieldState.setTempAndroidValueStr,
-    sectionOrder = _useFieldState.sectionOrder,
-    sectionsValueBoundaries = _useFieldState.sectionsValueBoundaries;
+    sectionsValueBoundaries = _useFieldState.sectionsValueBoundaries,
+    placeholder = _useFieldState.placeholder;
   var _useFieldCharacterEdi = useFieldCharacterEditing({
       sections: state.sections,
       updateSectionValue: updateSectionValue,
@@ -35,8 +36,10 @@ export var useField = function useField(params) {
     resetCharacterQuery = _useFieldCharacterEdi.resetCharacterQuery;
   var inputRefProp = params.inputRef,
     internalProps = params.internalProps,
-    _params$internalProps = params.internalProps.readOnly,
-    readOnly = _params$internalProps === void 0 ? false : _params$internalProps,
+    _params$internalProps = params.internalProps,
+    _params$internalProps2 = _params$internalProps.readOnly,
+    readOnly = _params$internalProps2 === void 0 ? false : _params$internalProps2,
+    unstableFieldRef = _params$internalProps.unstableFieldRef,
     _params$forwardedProp = params.forwardedProps,
     onClick = _params$forwardedProp.onClick,
     onKeyDown = _params$forwardedProp.onKeyDown,
@@ -52,10 +55,15 @@ export var useField = function useField(params) {
   var inputRef = React.useRef(null);
   var handleRef = useForkRef(inputRefProp, inputRef);
   var focusTimeoutRef = React.useRef(undefined);
+  var theme = useTheme();
+  var isRTL = theme.direction === 'rtl';
+  var sectionOrder = React.useMemo(function () {
+    return getSectionOrder(state.sections, isRTL);
+  }, [state.sections, isRTL]);
   var syncSelectionFromDOM = function syncSelectionFromDOM() {
     var _selectionStart;
     if (readOnly) {
-      setSelectedSections(null);
+      _setSelectedSections(null);
       return;
     }
     var browserStartIndex = (_selectionStart = inputRef.current.selectionStart) != null ? _selectionStart : 0;
@@ -64,7 +72,7 @@ export var useField = function useField(params) {
       return section.startInInput - section.startSeparator.length > browserStartIndex;
     });
     var sectionIndex = nextSectionIndex === -1 ? state.sections.length - 1 : nextSectionIndex - 1;
-    setSelectedSections(sectionIndex);
+    _setSelectedSections(sectionIndex);
   };
   var handleInputClick = useEventCallback(function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -98,7 +106,7 @@ export var useField = function useField(params) {
       if (
       // avoid selecting all sections when focusing empty field without value
       input.value.length && Number(input.selectionEnd) - Number(input.selectionStart) === input.value.length) {
-        setSelectedSections('all');
+        _setSelectedSections('all');
       } else {
         syncSelectionFromDOM();
       }
@@ -109,7 +117,7 @@ export var useField = function useField(params) {
       args[_key3] = arguments[_key3];
     }
     onBlur == null ? void 0 : onBlur.apply(void 0, _toConsumableArray(args));
-    setSelectedSections(null);
+    _setSelectedSections(null);
   });
   var handleInputPaste = useEventCallback(function (event) {
     onPaste == null ? void 0 : onPaste(event);
@@ -150,27 +158,32 @@ export var useField = function useField(params) {
       updateValueFromValueStr(cleanValueStr);
       return;
     }
-    var prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections));
-    var startOfDiffIndex = -1;
-    var endOfDiffIndex = -1;
-    for (var i = 0; i < prevValueStr.length; i += 1) {
-      if (startOfDiffIndex === -1 && prevValueStr[i] !== cleanValueStr[i]) {
-        startOfDiffIndex = i;
+    var keyPressed;
+    if (selectedSectionIndexes.startIndex === 0 && selectedSectionIndexes.endIndex === state.sections.length - 1) {
+      keyPressed = cleanValueStr;
+    } else {
+      var prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections, isRTL));
+      var startOfDiffIndex = -1;
+      var endOfDiffIndex = -1;
+      for (var i = 0; i < prevValueStr.length; i += 1) {
+        if (startOfDiffIndex === -1 && prevValueStr[i] !== cleanValueStr[i]) {
+          startOfDiffIndex = i;
+        }
+        if (endOfDiffIndex === -1 && prevValueStr[prevValueStr.length - i - 1] !== cleanValueStr[cleanValueStr.length - i - 1]) {
+          endOfDiffIndex = i;
+        }
       }
-      if (endOfDiffIndex === -1 && prevValueStr[prevValueStr.length - i - 1] !== cleanValueStr[cleanValueStr.length - i - 1]) {
-        endOfDiffIndex = i;
+      var activeSection = state.sections[selectedSectionIndexes.startIndex];
+      var hasDiffOutsideOfActiveSection = startOfDiffIndex < activeSection.start || prevValueStr.length - endOfDiffIndex - 1 > activeSection.end;
+      if (hasDiffOutsideOfActiveSection) {
+        // TODO: Support if the new date is valid
+        return;
       }
-    }
-    var activeSection = state.sections[selectedSectionIndexes.startIndex];
-    var hasDiffOutsideOfActiveSection = startOfDiffIndex < activeSection.start || prevValueStr.length - endOfDiffIndex - 1 > activeSection.end;
-    if (hasDiffOutsideOfActiveSection) {
-      // TODO: Support if the new date is valid
-      return;
-    }
 
-    // The active section being selected, the browser has replaced its value with the key pressed by the user.
-    var activeSectionEndRelativeToNewValue = cleanValueStr.length - prevValueStr.length + activeSection.end - cleanString(activeSection.endSeparator || '').length;
-    var keyPressed = cleanValueStr.slice(activeSection.start, activeSectionEndRelativeToNewValue);
+      // The active section being selected, the browser has replaced its value with the key pressed by the user.
+      var activeSectionEndRelativeToNewValue = cleanValueStr.length - prevValueStr.length + activeSection.end - cleanString(activeSection.endSeparator || '').length;
+      keyPressed = cleanValueStr.slice(activeSection.start, activeSectionEndRelativeToNewValue);
+    }
     if (isAndroid() && keyPressed.length === 0) {
       setTempAndroidValueStr(valueStr);
       return;
@@ -191,7 +204,7 @@ export var useField = function useField(params) {
           // prevent default to make sure that the next line "select all" while updating
           // the internal state at the same time.
           event.preventDefault();
-          setSelectedSections('all');
+          _setSelectedSections('all');
           break;
         }
 
@@ -200,13 +213,13 @@ export var useField = function useField(params) {
         {
           event.preventDefault();
           if (selectedSectionIndexes == null) {
-            setSelectedSections(sectionOrder.startIndex);
+            _setSelectedSections(sectionOrder.startIndex);
           } else if (selectedSectionIndexes.startIndex !== selectedSectionIndexes.endIndex) {
-            setSelectedSections(selectedSectionIndexes.endIndex);
+            _setSelectedSections(selectedSectionIndexes.endIndex);
           } else {
             var nextSectionIndex = sectionOrder.neighbors[selectedSectionIndexes.startIndex].rightIndex;
             if (nextSectionIndex !== null) {
-              setSelectedSections(nextSectionIndex);
+              _setSelectedSections(nextSectionIndex);
             }
           }
           break;
@@ -217,13 +230,13 @@ export var useField = function useField(params) {
         {
           event.preventDefault();
           if (selectedSectionIndexes == null) {
-            setSelectedSections(sectionOrder.endIndex);
+            _setSelectedSections(sectionOrder.endIndex);
           } else if (selectedSectionIndexes.startIndex !== selectedSectionIndexes.endIndex) {
-            setSelectedSections(selectedSectionIndexes.startIndex);
+            _setSelectedSections(selectedSectionIndexes.startIndex);
           } else {
             var _nextSectionIndex = sectionOrder.neighbors[selectedSectionIndexes.startIndex].leftIndex;
             if (_nextSectionIndex !== null) {
-              setSelectedSections(_nextSectionIndex);
+              _setSelectedSections(_nextSectionIndex);
             }
           }
           break;
@@ -254,7 +267,7 @@ export var useField = function useField(params) {
           }
           var activeSection = state.sections[selectedSectionIndexes.startIndex];
           var activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
-          var newSectionValue = adjustSectionValue(utils, activeSection, event.key, sectionsValueBoundaries, activeDateManager.activeDate);
+          var newSectionValue = adjustSectionValue(utils, activeSection, event.key, sectionsValueBoundaries, activeDateManager.date);
           updateSectionValue({
             activeSection: activeSection,
             newSectionValue: newSectionValue,
@@ -266,9 +279,11 @@ export var useField = function useField(params) {
   });
   useEnhancedEffect(function () {
     if (selectedSectionIndexes == null) {
-      if (inputRef.current.selectionStart !== 0 || inputRef.current.selectionEnd !== 0) {
-        // Ensure input selection range is in sync with component selection indexes
-        inputRef.current.setSelectionRange(0, 0);
+      if (inputRef.current.scrollLeft) {
+        // Ensure that input content is not marked as selected.
+        // setting selection range to 0 causes issues in Safari.
+        // https://bugs.webkit.org/show_bug.cgi?id=224425
+        inputRef.current.scrollLeft = 0;
       }
       return;
     }
@@ -281,7 +296,11 @@ export var useField = function useField(params) {
       selectionEnd += lastSelectedSection.endSeparator.length;
     }
     if (selectionStart !== inputRef.current.selectionStart || selectionEnd !== inputRef.current.selectionEnd) {
+      // Fix scroll jumping on iOS browser: https://github.com/mui/mui-x/issues/8321
+      var currentScrollTop = inputRef.current.scrollTop;
       inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+      // Even reading this variable seems to do the trick, but also setting it just to make use of it
+      inputRef.current.scrollTop = currentScrollTop;
     }
   });
   var validationError = useValidation(_extends({}, internalProps, {
@@ -298,7 +317,7 @@ export var useField = function useField(params) {
   React.useEffect(function () {
     // Select the right section when focused on mount (`autoFocus = true` on the input)
     if (inputRef.current && inputRef.current === document.activeElement) {
-      setSelectedSections('all');
+      _setSelectedSections('all');
     }
     return function () {
       return window.clearTimeout(focusTimeoutRef.current);
@@ -318,8 +337,8 @@ export var useField = function useField(params) {
 
   var valueStr = React.useMemo(function () {
     var _state$tempValueStrAn;
-    return (_state$tempValueStrAn = state.tempValueStrAndroid) != null ? _state$tempValueStrAn : fieldValueManager.getValueStrFromSections(state.sections);
-  }, [state.sections, fieldValueManager, state.tempValueStrAndroid]);
+    return (_state$tempValueStrAn = state.tempValueStrAndroid) != null ? _state$tempValueStrAn : fieldValueManager.getValueStrFromSections(state.sections, isRTL);
+  }, [state.sections, fieldValueManager, state.tempValueStrAndroid, isRTL]);
   var inputMode = React.useMemo(function () {
     if (selectedSectionIndexes == null) {
       return 'text';
@@ -330,9 +349,32 @@ export var useField = function useField(params) {
     return 'tel';
   }, [selectedSectionIndexes, state.sections]);
   var inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document);
-  var shouldShowPlaceholder = !inputHasFocus && (!state.value || valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue));
+  var shouldShowPlaceholder = !inputHasFocus && valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);
+  React.useImperativeHandle(unstableFieldRef, function () {
+    return {
+      getSections: function getSections() {
+        return state.sections;
+      },
+      getActiveSectionIndex: function getActiveSectionIndex() {
+        var _selectionStart2, _selectionEnd;
+        var browserStartIndex = (_selectionStart2 = inputRef.current.selectionStart) != null ? _selectionStart2 : 0;
+        var browserEndIndex = (_selectionEnd = inputRef.current.selectionEnd) != null ? _selectionEnd : 0;
+        if (browserStartIndex === 0 && browserEndIndex === 0) {
+          return null;
+        }
+        var nextSectionIndex = browserStartIndex <= state.sections[0].startInInput ? 1 // Special case if browser index is in invisible characters at the beginning.
+        : state.sections.findIndex(function (section) {
+          return section.startInInput - section.startSeparator.length > browserStartIndex;
+        });
+        return nextSectionIndex === -1 ? state.sections.length - 1 : nextSectionIndex - 1;
+      },
+      setSelectedSections: function setSelectedSections(activeSectionIndex) {
+        return _setSelectedSections(activeSectionIndex);
+      }
+    };
+  });
   return _extends({
-    placeholder: state.placeholder,
+    placeholder: placeholder,
     autoComplete: 'off'
   }, otherForwardedProps, {
     value: shouldShowPlaceholder ? '' : valueStr,

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

@@ -155,7 +155,7 @@ export var adjustSectionValue = function adjustSectionValue(utils, section, keyC
   }
   return adjustLetterSection();
 };
-var getSectionVisibleValue = function getSectionVisibleValue(section, willBeRenderedInInput) {
+export var getSectionVisibleValue = function getSectionVisibleValue(section, target) {
   var value = section.value || section.placeholder;
 
   // In the input, we add an empty character at the end of each section without leading zeros.
@@ -163,26 +163,25 @@ var getSectionVisibleValue = function getSectionVisibleValue(section, willBeRend
   // Otherwise, when your input value equals `1/dd/yyyy` (format `M/DD/YYYY` on DayJs),
   // If you press `1`, on the first section, the new value is also `1/dd/yyyy`,
   // So the browser will not fire the input `onChange`.
-  // Adding the ltr mark is not a problem because it's only for digit (which are always ltr)
-  // The \u2068 and \u2069 are cleaned, but not the \u200e to notice that an update with same digit occurs
-  if (willBeRenderedInInput && section.contentType === 'digit' && !section.hasLeadingZeros && value.length === 1) {
-    return "\u2068".concat(value, "\u200E\u2069");
+  var shouldAddInvisibleSpace = ['input-rtl', 'input-ltr'].includes(target) && section.contentType === 'digit' && !section.hasLeadingZeros && value.length === 1;
+  if (shouldAddInvisibleSpace) {
+    value = "".concat(value, "\u200E");
   }
-  if (willBeRenderedInInput) {
-    return "\u2068".concat(value, "\u2069");
+  if (target === 'input-rtl') {
+    value = "\u2068".concat(value, "\u2069");
   }
   return value;
 };
 export var cleanString = function cleanString(dirtyString) {
   return dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
 };
-export var addPositionPropertiesToSections = function addPositionPropertiesToSections(sections) {
+export var addPositionPropertiesToSections = function addPositionPropertiesToSections(sections, isRTL) {
   var position = 0;
-  var positionInInput = 1;
+  var positionInInput = isRTL ? 1 : 0;
   var newSections = [];
   for (var i = 0; i < sections.length; i += 1) {
     var section = sections[i];
-    var renderedValue = getSectionVisibleValue(section, true);
+    var renderedValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr');
     var sectionStr = "".concat(section.startSeparator).concat(renderedValue).concat(section.endSeparator);
     var sectionLength = cleanString(sectionStr).length;
     var sectionLengthInInput = sectionStr.length;
@@ -328,10 +327,6 @@ export var splitFormatIntoSections = function splitFormatIntoSections(utils, loc
     if (token === '') {
       return null;
     }
-    var expandedToken = utils.expandFormat(token);
-    if (expandedToken !== token) {
-      return expandedToken;
-    }
     var sectionConfig = getDateSectionConfigFromFormatToken(utils, token);
     var sectionValue = date == null || !utils.isValid(date) ? '' : utils.formatByString(date, token);
     var hasLeadingZeros = doesSectionHaveLeadingZeros(utils, sectionConfig.contentType, sectionConfig.type, token);
@@ -346,44 +341,55 @@ export var splitFormatIntoSections = function splitFormatIntoSections(utils, loc
     }));
     return null;
   };
-  var splitFormat = function splitFormat(token) {
-    var escapedParts = getEscapedPartsFromFormat(utils, token);
-    var currentTokenValue = '';
-    var _loop = function _loop(i) {
-      var escapedPartOfCurrentChar = escapedParts.find(function (escapeIndex) {
-        return escapeIndex.start <= i && escapeIndex.end >= i;
-      });
-      var char = token[i];
-      var isEscapedChar = escapedPartOfCurrentChar != null;
-      if (!isEscapedChar && char.match(/([A-Za-z]+)/)) {
-        currentTokenValue += char;
-      } else {
-        // If we are on the opening or closing character of an escaped part of the format,
-        // Then we ignore this character.
-        var isEscapeBoundary = isEscapedChar && (escapedPartOfCurrentChar == null ? void 0 : escapedPartOfCurrentChar.start) === i || (escapedPartOfCurrentChar == null ? void 0 : escapedPartOfCurrentChar.end) === i;
-        if (!isEscapeBoundary) {
-          var _expandedToken = commitToken(currentTokenValue);
-          if (_expandedToken != null) {
-            splitFormat(_expandedToken);
-          }
-          currentTokenValue = '';
-          if (sections.length === 0) {
-            startSeparator += char;
-          } else {
-            sections[sections.length - 1].endSeparator += char;
-          }
+
+  // Expand the provided format
+  var formatExpansionOverflow = 10;
+  var prevFormat = format;
+  var nextFormat = utils.expandFormat(format);
+  while (nextFormat !== prevFormat) {
+    prevFormat = nextFormat;
+    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');
+    }
+  }
+  var expandedFormat = nextFormat;
+
+  // Get start/end indexes of escaped sections
+  var escapedParts = getEscapedPartsFromFormat(utils, expandedFormat);
+
+  // This RegExp test if the beginning of a string correspond to a supported token
+  var isTokenStartRegExp = new RegExp("^(".concat(Object.keys(utils.formatTokenMap).join('|'), ")"));
+  var currentTokenValue = '';
+  var _loop = function _loop(i) {
+    var escapedPartOfCurrentChar = escapedParts.find(function (escapeIndex) {
+      return escapeIndex.start <= i && escapeIndex.end >= i;
+    });
+    var char = expandedFormat[i];
+    var isEscapedChar = escapedPartOfCurrentChar != null;
+    var potentialToken = "".concat(currentTokenValue).concat(expandedFormat.slice(i));
+    if (!isEscapedChar && char.match(/([A-Za-z]+)/) && isTokenStartRegExp.test(potentialToken)) {
+      currentTokenValue += char;
+    } else {
+      // If we are on the opening or closing character of an escaped part of the format,
+      // Then we ignore this character.
+      var isEscapeBoundary = isEscapedChar && (escapedPartOfCurrentChar == null ? void 0 : escapedPartOfCurrentChar.start) === i || (escapedPartOfCurrentChar == null ? void 0 : escapedPartOfCurrentChar.end) === i;
+      if (!isEscapeBoundary) {
+        commitToken(currentTokenValue);
+        currentTokenValue = '';
+        if (sections.length === 0) {
+          startSeparator += char;
+        } else {
+          sections[sections.length - 1].endSeparator += char;
         }
       }
-    };
-    for (var i = 0; i < token.length; i += 1) {
-      _loop(i);
-    }
-    var expandedToken = commitToken(currentTokenValue);
-    if (expandedToken != null) {
-      splitFormat(expandedToken);
     }
   };
-  splitFormat(format);
+  for (var i = 0; i < expandedFormat.length; i += 1) {
+    _loop(i);
+  }
+  commitToken(currentTokenValue);
   return sections.map(function (section) {
     var cleanSeparator = function cleanSeparator(separator) {
       var cleanedSeparator = separator;
@@ -419,24 +425,28 @@ export var getDateFromDateSections = function getDateFromDateSections(utils, sec
     var shouldSkip = shouldSkipWeekDays && section.type === 'weekDay';
     if (!shouldSkip) {
       sectionFormats.push(section.format);
-      sectionValues.push(getSectionVisibleValue(section, false));
+      sectionValues.push(getSectionVisibleValue(section, 'non-input'));
     }
   }
   var formatWithoutSeparator = sectionFormats.join(' ');
   var dateWithoutSeparatorStr = sectionValues.join(' ');
   return utils.parse(dateWithoutSeparatorStr, formatWithoutSeparator);
 };
-export var createDateStrForInputFromSections = function createDateStrForInputFromSections(sections) {
-  var formattedArray = sections.map(function (section) {
-    return "".concat(section.startSeparator).concat(getSectionVisibleValue(section, true)).concat(section.endSeparator);
+export var createDateStrForInputFromSections = function createDateStrForInputFromSections(sections, isRTL) {
+  var formattedSections = sections.map(function (section) {
+    return "".concat(section.startSeparator).concat(getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr')).concat(section.endSeparator);
   });
+  var dateStr = formattedSections.join('');
+  if (!isRTL) {
+    return dateStr;
+  }
 
   // \u2066: start left-to-right isolation
   // \u2067: start right-to-left isolation
   // \u2068: start first strong character isolation
   // \u2069: pop isolation
   // wrap into an isolated group such that separators can split the string in smaller ones by adding \u2069\u2068
-  return "\u2066".concat(formattedArray.join(''), "\u2069");
+  return "\u2066".concat(dateStr, "\u2069");
 };
 export var getSectionsBoundaries = function getSectionsBoundaries(utils) {
   var today = utils.date();
@@ -616,7 +626,19 @@ export var mergeDateIntoReferenceDate = function mergeDateIntoReferenceDate(util
 export var isAndroid = function isAndroid() {
   return navigator.userAgent.toLowerCase().indexOf('android') > -1;
 };
-export var clampDaySection = function clampDaySection(utils, sections, sectionsValueBoundaries) {
+export var clampDaySectionIfPossible = function clampDaySectionIfPossible(utils, sections, sectionsValueBoundaries) {
+  // We can only clamp the day value if:
+  // 1. if all the sections are filled (except the week day section which can be empty)
+  // 2. there is a day section
+  var canClamp = sections.every(function (section) {
+    return section.type === 'weekDay' || section.value !== '';
+  }) && sections.some(function (section) {
+    return section.type === 'day';
+  });
+  if (!canClamp) {
+    return null;
+  }
+
   // We try to generate a valid date representing the start of the month of the invalid date typed by the user.
   var sectionsForStartOfMonth = sections.map(function (section) {
     if (section.type !== 'day') {