@mui/x-date-pickers 6.0.3 → 6.0.4

package/internals/hooks/useField/useField.js

@@ -23,7 +23,8 @@ export const useField = params => {
     updateSectionValue,
     updateValueFromValueStr,
     setTempAndroidValueStr,
-    sectionsValueBoundaries
+    sectionsValueBoundaries,
+    placeholder
   } = useFieldState(params);
   const {
     applyCharacterEditing,
@@ -59,7 +60,8 @@ export const useField = params => {
   const handleRef = useForkRef(inputRefProp, inputRef);
   const focusTimeoutRef = React.useRef(undefined);
   const theme = useTheme();
-  const sectionOrder = React.useMemo(() => getSectionOrder(state.sections, theme.direction === 'rtl'), [theme.direction, state.sections]);
+  const isRTL = theme.direction === 'rtl';
+  const sectionOrder = React.useMemo(() => getSectionOrder(state.sections, isRTL), [state.sections, isRTL]);
   const syncSelectionFromDOM = () => {
     var _selectionStart;
     if (readOnly) {
@@ -151,7 +153,7 @@ export const useField = params => {
     if (selectedSectionIndexes.startIndex === 0 && selectedSectionIndexes.endIndex === state.sections.length - 1) {
       keyPressed = cleanValueStr;
     } else {
-      const prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections));
+      const prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections, isRTL));
       let startOfDiffIndex = -1;
       let endOfDiffIndex = -1;
       for (let i = 0; i < prevValueStr.length; i += 1) {
@@ -256,7 +258,7 @@ export const useField = params => {
           }
           const activeSection = state.sections[selectedSectionIndexes.startIndex];
           const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
-          const newSectionValue = adjustSectionValue(utils, activeSection, event.key, sectionsValueBoundaries, activeDateManager.activeDate);
+          const newSectionValue = adjustSectionValue(utils, activeSection, event.key, sectionsValueBoundaries, activeDateManager.date);
           updateSectionValue({
             activeSection,
             newSectionValue,
@@ -324,8 +326,8 @@ export const useField = params => {
 
   const valueStr = React.useMemo(() => {
     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]);
   const inputMode = React.useMemo(() => {
     if (selectedSectionIndexes == null) {
       return 'text';
@@ -353,7 +355,7 @@ export const useField = params => {
     setSelectedSections: activeSectionIndex => setSelectedSections(activeSectionIndex)
   }));
   return _extends({
-    placeholder: state.placeholder,
+    placeholder,
     autoComplete: 'off'
   }, otherForwardedProps, {
     value: shouldShowPlaceholder ? '' : valueStr,

package/internals/hooks/useField/useField.types.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { FieldSectionType, MuiPickersAdapter } from '../../models';
+import { MuiPickersAdapter } from '../../models';
+import { FieldSectionType, FieldSection, FieldSelectedSections } from '../../../models';
 import type { PickerValueManager } from '../usePicker';
 import { InferError, Validator } from '../validation/useValidation';
-import { PickersLocaleText } from '../../../locales/utils/pickersLocaleTextApi';
 export interface UseFieldParams<TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any>> {
     inputRef?: React.Ref<HTMLInputElement>;
     forwardedProps: TForwardedProps;
@@ -103,76 +103,6 @@ export type UseFieldResponse<TForwardedProps extends UseFieldForwardedProps> = O
     readOnly: boolean;
     autoComplete: 'off';
 };
-export interface FieldSection {
-    /**
-     * Value of the section, as rendered inside the input.
-     * For example, in the date `May 25, 1995`, the value of the month section is "May".
-     */
-    value: string;
-    /**
-     * Format token used to parse the value of this section from the date object.
-     * For example, in the format `MMMM D, YYYY`, the format of the month section is "MMMM".
-     */
-    format: string;
-    /**
-     * Placeholder rendered when the value of this section is empty.
-     */
-    placeholder: string;
-    /**
-     * Type of the section.
-     */
-    type: FieldSectionType;
-    /**
-     * Type of content of the section.
-     * Will determine if we should apply a digit-based editing or a letter-based editing.
-     */
-    contentType: 'digit' | 'letter';
-    /**
-     * If `true`, the value of this section is supposed to have leading zeroes.
-     * For example, the value `1` should be rendered as "01" instead of "1".
-     */
-    hasLeadingZeros: boolean;
-    /**
-     * If `true`, the section value has been modified since the last time the sections were generated from a valid date.
-     * When we can generate a valid date from the section, we don't directly pass it to `onChange`,
-     * Otherwise, we would lose all the information contained in the original date, things like:
-     * - time if the format does not contain it
-     * - timezone / UTC
-     *
-     * To avoid losing that information, we transfer the values of the modified sections from the newly generated date to the original date.
-     */
-    modified: boolean;
-    /**
-     * Start index of the section in the format
-     */
-    start: number;
-    /**
-     * End index of the section in the format
-     */
-    end: number;
-    /**
-     * Start index of the section value in the input.
-     * Takes into account invisible unicode characters such as \u2069 but does not include them
-     */
-    startInInput: number;
-    /**
-     * End index of the section value in the input.
-     * Takes into account invisible unicode characters such as \u2069 but does not include them
-     */
-    endInInput: number;
-    /**
-     * Separator displayed before the value of the section in the input.
-     * If it contains escaped characters, then it must not have the escaping characters.
-     * For example, on Day.js, the `year` section of the format `YYYY [year]` has an end separator equal to `year` not `[year]`
-     */
-    startSeparator: string;
-    /**
-     * Separator displayed after the value of the section in the input.
-     * If it contains escaped characters, then it must not have the escaping characters.
-     * For example, on Day.js, the `year` section of the format `[year] YYYY` has a start separator equal to `[year]`
-     */
-    endSeparator: string;
-}
 export type FieldSectionWithoutPosition<TSection extends FieldSection = FieldSection> = Omit<TSection, 'start' | 'end' | 'startInInput' | 'endInInput'>;
 export type FieldSectionValueBoundaries<TDate, SectionType extends FieldSectionType> = {
     minimum: number;
@@ -192,25 +122,32 @@ export interface FieldChangeHandlerContext<TError> {
     validationError: TError;
 }
 /**
- * Object used to access and update the active value.
+ * Object used to access and update the active date (i.e: the date containing the active section).
  * Mainly useful in the range fields where we need to update the date containing the active section without impacting the other one.
  */
-interface FieldActiveDateManager<TValue, TDate> {
+interface FieldActiveDateManager<TValue, TDate, TSection extends FieldSection> {
     /**
-     * Date containing the current active section.
+     * Active date from `state.value`.
      */
-    activeDate: TDate | null;
+    date: TDate | null;
     /**
-     * Reference date containing the current active section.
+     * Active date from the `state.referenceValue`.
      */
-    referenceActiveDate: TDate;
+    referenceDate: TDate;
+    /**
+     * @template TSection
+     * @param  {TSection[]} sections The sections of the full value.
+     * @returns {TSection[]} The sections of the active date.
+     * Get the sections of the active date.
+     */
+    getSections: (sections: TSection[]) => TSection[];
     /**
      * Creates the new value and reference value based on the new active date and the current state.
      * @template TValue, TDate
      * @param {TDate | null} newActiveDate The new value of the date containing the active section.
      * @returns {Pick<UseFieldState<TValue, any>, 'value' | 'referenceValue'>} The new value and reference value to publish and store in the state.
      */
-    getNewValueFromNewActiveDate: (newActiveDate: TDate | null) => Pick<UseFieldState<TValue, any>, 'value' | 'referenceValue'>;
+    getNewValuesFromNewActiveDate: (newActiveDate: TDate | null) => Pick<UseFieldState<TValue, any>, 'value' | 'referenceValue'>;
 }
 export type FieldSelectedSectionsIndexes = {
     startIndex: number;
@@ -221,49 +158,36 @@ export type FieldSelectedSectionsIndexes = {
      */
     shouldSelectBoundarySelectors?: boolean;
 };
-export type FieldSelectedSections = number | FieldSectionType | null | 'all' | {
-    startIndex: number;
-    endIndex: number;
-};
 export interface FieldValueManager<TValue, TDate, TSection extends FieldSection, TError> {
     /**
      * Creates the section list from the current value.
      * The `prevSections` are used on the range fields to avoid losing the sections of a partially filled date when editing the other date.
      * @template TValue, TDate, TSection
      * @param {MuiPickersAdapter<TDate>} utils The utils to manipulate the date.
-     * @param {PickersLocaleText<TDate>} localeText The localization object to generate the placeholders.
-     * @param {TSection[] | null} sections The sections to use as a fallback if a date is null or invalid.
      * @param {TValue} value The current value to generate sections from.
-     * @param {string} format The date format.
+     * @param {TSection[] | null} fallbackSections The sections to use as a fallback if a date is null or invalid.
+     * @param {boolean} isRTL `true` if the direction is "right to left".
+     * @param {(date: TDate) => FieldSectionWithoutPosition[]} getSectionsFromDate Returns the sections of the given date.
      * @returns {TSection[]}  The new section list.
      */
-    getSectionsFromValue: (utils: MuiPickersAdapter<TDate>, localeText: PickersLocaleText<TDate>, sections: TSection[] | null, value: TValue, format: string) => TSection[];
+    getSectionsFromValue: (utils: MuiPickersAdapter<TDate>, value: TValue, fallbackSections: TSection[] | null, isRTL: boolean, getSectionsFromDate: (date: TDate) => FieldSectionWithoutPosition[]) => TSection[];
     /**
      * Creates the string value to render in the input based on the current section list.
      * @template TSection
      * @param {TSection[]} sections The current section list.
+     * @param {boolean} isRTL `true` is the current orientation is "right to left"
      * @returns {string} The string value to render in the input.
      */
-    getValueStrFromSections: (sections: TSection[]) => string;
-    /**
-     * Filter the section list to only keep the sections in the same date as the active section.
-     * On a single date field does nothing.
-     * On a range date range, returns the sections of the start date if editing the start date and the end date otherwise.
-     * @template TSection
-     * @param {TSection[]} sections The full section list.
-     * @param {TSection} activeSection The active section.
-     * @returns {TSection[]} The sections in the same date as the active section.
-     */
-    getActiveDateSections: (sections: TSection[], activeSection: TSection) => TSection[];
+    getValueStrFromSections: (sections: TSection[], isRTL: boolean) => string;
     /**
      * Returns the manager of the active date.
      * @template TValue, TDate, TSection
      * @param {MuiPickersAdapter<TDate>} utils The utils to manipulate the date.
      * @param {UseFieldState<TValue, TSection>} state The current state of the field.
      * @param {TSection} activeSection The active section.
-     * @returns {FieldActiveDateManager<TValue, TDate>} The manager of the active date.
+     * @returns {FieldActiveDateManager<TValue, TDate, TSection>} The manager of the active date.
      */
-    getActiveDateManager: (utils: MuiPickersAdapter<TDate>, state: UseFieldState<TValue, TSection>, activeSection: TSection) => FieldActiveDateManager<TValue, TDate>;
+    getActiveDateManager: (utils: MuiPickersAdapter<TDate>, state: UseFieldState<TValue, TSection>, activeSection: TSection) => FieldActiveDateManager<TValue, TDate, TSection>;
     /**
      * Parses a string version (most of the time coming from the input).
      * This method should only be used when the change does not come from a single section.
@@ -299,10 +223,6 @@ export interface UseFieldState<TValue, TSection extends FieldSection> {
      * It is updated whenever we have a valid date (for the range picker we update only the portion of the range that is valid).
      */
     referenceValue: TValue;
-    /**
-     * A localized format string built from sections.
-     */
-    placeholder: string;
     sections: TSection[];
     /**
      * Android `onChange` behavior when the input selection is not empty is quite different from a desktop behavior.

package/internals/hooks/useField/useField.utils.d.ts

@@ -1,13 +1,15 @@
-import { FieldSection, AvailableAdjustKeyCode, FieldSectionsValueBoundaries, SectionOrdering, FieldValueType, FieldSectionWithoutPosition, FieldSectionValueBoundaries } from './useField.types';
-import { MuiPickersAdapter, FieldSectionType } from '../../models';
+import { AvailableAdjustKeyCode, FieldSectionsValueBoundaries, SectionOrdering, FieldValueType, FieldSectionWithoutPosition, FieldSectionValueBoundaries } from './useField.types';
+import { MuiPickersAdapter } from '../../models';
+import { FieldSectionType, FieldSection } from '../../../models';
 import { PickersLocaleText } from '../../../locales/utils/pickersLocaleTextApi';
 export declare const getDateSectionConfigFromFormatToken: <TDate>(utils: MuiPickersAdapter<TDate>, formatToken: string) => Pick<FieldSection, 'type' | 'contentType'>;
 export declare const getDaysInWeekStr: <TDate>(utils: MuiPickersAdapter<TDate>, format: string) => string[];
 export declare const getLetterEditingOptions: <TDate>(utils: MuiPickersAdapter<TDate>, sectionType: FieldSectionType, format: string) => string[];
 export declare const cleanDigitSectionValue: <TDate>(utils: MuiPickersAdapter<TDate>, value: number, sectionType: FieldSectionType, format: string, hasLeadingZeros: boolean, sectionBoundaries: FieldSectionValueBoundaries<TDate, any>) => string;
 export declare const adjustSectionValue: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate>, section: TSection, keyCode: AvailableAdjustKeyCode, sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>, activeDate: TDate | null) => string;
+export declare const getSectionVisibleValue: (section: FieldSectionWithoutPosition, target: 'input-rtl' | 'input-ltr' | 'non-input') => string;
 export declare const cleanString: (dirtyString: string) => string;
-export declare const addPositionPropertiesToSections: <TSection extends FieldSection>(sections: FieldSectionWithoutPosition<TSection>[]) => TSection[];
+export declare const addPositionPropertiesToSections: <TSection extends FieldSection>(sections: FieldSectionWithoutPosition<TSection>[], isRTL: boolean) => TSection[];
 export declare const changeSectionValueFormat: <TDate>(utils: MuiPickersAdapter<TDate>, valueStr: string, currentFormat: string, newFormat: string) => string;
 export declare const doesSectionHaveLeadingZeros: <TDate>(utils: MuiPickersAdapter<TDate>, contentType: 'digit' | 'letter', sectionType: FieldSectionType, format: string) => boolean;
 export declare const splitFormatIntoSections: <TDate>(utils: MuiPickersAdapter<TDate>, localeText: PickersLocaleText<TDate>, format: string, date: TDate | null) => FieldSectionWithoutPosition<FieldSection>[];
@@ -16,10 +18,10 @@ export declare const splitFormatIntoSections: <TDate>(utils: MuiPickersAdapter<T
  * To make sure that the parsing works, we are building a format and a date without any separator.
  */
 export declare const getDateFromDateSections: <TDate>(utils: MuiPickersAdapter<TDate>, sections: FieldSection[]) => TDate | null;
-export declare const createDateStrForInputFromSections: (sections: FieldSection[]) => string;
+export declare const createDateStrForInputFromSections: (sections: FieldSection[], isRTL: boolean) => string;
 export declare const getSectionsBoundaries: <TDate>(utils: MuiPickersAdapter<TDate>) => FieldSectionsValueBoundaries<TDate>;
 export declare const validateSections: <TSection extends FieldSection>(sections: TSection[], valueType: FieldValueType) => void;
 export declare const mergeDateIntoReferenceDate: <TDate>(utils: MuiPickersAdapter<TDate>, dateToTransferFrom: TDate, sections: FieldSectionWithoutPosition[], referenceDate: TDate, shouldLimitToEditedSections: boolean) => TDate;
 export declare const isAndroid: () => boolean;
-export declare const clampDaySection: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate>, sections: TSection[], sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>) => TSection[] | null;
+export declare const clampDaySectionIfPossible: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate>, sections: TSection[], sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>) => TSection[] | null;
 export declare const getSectionOrder: (sections: FieldSectionWithoutPosition[], isRTL: boolean) => SectionOrdering;

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

@@ -147,32 +147,31 @@ export const adjustSectionValue = (utils, section, keyCode, sectionsValueBoundar
   }
   return adjustLetterSection();
 };
-const getSectionVisibleValue = (section, willBeRenderedInInput) => {
-  const value = section.value || section.placeholder;
+export const getSectionVisibleValue = (section, target) => {
+  let value = section.value || section.placeholder;
 
   // In the input, we add an empty character at the end of each section without leading zeros.
   // This makes sure that `onChange` will always be fired.
   // 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${value}\u200e\u2069`;
+  const shouldAddInvisibleSpace = ['input-rtl', 'input-ltr'].includes(target) && section.contentType === 'digit' && !section.hasLeadingZeros && value.length === 1;
+  if (shouldAddInvisibleSpace) {
+    value = `${value}\u200e`;
   }
-  if (willBeRenderedInInput) {
-    return `\u2068${value}\u2069`;
+  if (target === 'input-rtl') {
+    value = `\u2068${value}\u2069`;
   }
   return value;
 };
 export const cleanString = dirtyString => dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
-export const addPositionPropertiesToSections = sections => {
+export const addPositionPropertiesToSections = (sections, isRTL) => {
   let position = 0;
-  let positionInInput = 1;
+  let positionInInput = isRTL ? 1 : 0;
   const newSections = [];
   for (let i = 0; i < sections.length; i += 1) {
     const section = sections[i];
-    const renderedValue = getSectionVisibleValue(section, true);
+    const renderedValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr');
     const sectionStr = `${section.startSeparator}${renderedValue}${section.endSeparator}`;
     const sectionLength = cleanString(sectionStr).length;
     const sectionLengthInInput = sectionStr.length;
@@ -317,10 +316,6 @@ export const splitFormatIntoSections = (utils, localeText, format, date) => {
     if (token === '') {
       return null;
     }
-    const expandedToken = utils.expandFormat(token);
-    if (expandedToken !== token) {
-      return expandedToken;
-    }
     const sectionConfig = getDateSectionConfigFromFormatToken(utils, token);
     const sectionValue = date == null || !utils.isValid(date) ? '' : utils.formatByString(date, token);
     const hasLeadingZeros = doesSectionHaveLeadingZeros(utils, sectionConfig.contentType, sectionConfig.type, token);
@@ -335,39 +330,50 @@ export const splitFormatIntoSections = (utils, localeText, format, date) => {
     }));
     return null;
   };
-  const splitFormat = token => {
-    const escapedParts = getEscapedPartsFromFormat(utils, token);
-    let currentTokenValue = '';
-    for (let i = 0; i < token.length; i += 1) {
-      const escapedPartOfCurrentChar = escapedParts.find(escapeIndex => escapeIndex.start <= i && escapeIndex.end >= i);
-      const char = token[i];
-      const 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.
-        const isEscapeBoundary = isEscapedChar && (escapedPartOfCurrentChar == null ? void 0 : escapedPartOfCurrentChar.start) === i || (escapedPartOfCurrentChar == null ? void 0 : escapedPartOfCurrentChar.end) === i;
-        if (!isEscapeBoundary) {
-          const 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
+  let formatExpansionOverflow = 10;
+  let prevFormat = format;
+  let 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');
+    }
+  }
+  const expandedFormat = nextFormat;
+
+  // Get start/end indexes of escaped sections
+  const escapedParts = getEscapedPartsFromFormat(utils, expandedFormat);
+
+  // This RegExp test if the beginning of a string correspond to a supported token
+  const isTokenStartRegExp = new RegExp(`^(${Object.keys(utils.formatTokenMap).join('|')})`);
+  let currentTokenValue = '';
+  for (let i = 0; i < expandedFormat.length; i += 1) {
+    const escapedPartOfCurrentChar = escapedParts.find(escapeIndex => escapeIndex.start <= i && escapeIndex.end >= i);
+    const char = expandedFormat[i];
+    const isEscapedChar = escapedPartOfCurrentChar != null;
+    const potentialToken = `${currentTokenValue}${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.
+      const 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;
         }
       }
     }
-    const expandedToken = commitToken(currentTokenValue);
-    if (expandedToken != null) {
-      splitFormat(expandedToken);
-    }
-  };
-  splitFormat(format);
+  }
+  commitToken(currentTokenValue);
   return sections.map(section => {
     const cleanSeparator = separator => {
       let cleanedSeparator = separator;
@@ -401,22 +407,26 @@ export const getDateFromDateSections = (utils, sections) => {
     const shouldSkip = shouldSkipWeekDays && section.type === 'weekDay';
     if (!shouldSkip) {
       sectionFormats.push(section.format);
-      sectionValues.push(getSectionVisibleValue(section, false));
+      sectionValues.push(getSectionVisibleValue(section, 'non-input'));
     }
   }
   const formatWithoutSeparator = sectionFormats.join(' ');
   const dateWithoutSeparatorStr = sectionValues.join(' ');
   return utils.parse(dateWithoutSeparatorStr, formatWithoutSeparator);
 };
-export const createDateStrForInputFromSections = sections => {
-  const formattedArray = sections.map(section => `${section.startSeparator}${getSectionVisibleValue(section, true)}${section.endSeparator}`);
+export const createDateStrForInputFromSections = (sections, isRTL) => {
+  const formattedSections = sections.map(section => `${section.startSeparator}${getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr')}${section.endSeparator}`);
+  const 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${formattedArray.join('')}\u2069`;
+  return `\u2066${dateStr}\u2069`;
 };
 export const getSectionsBoundaries = utils => {
   const today = utils.date();
@@ -583,7 +593,15 @@ export const mergeDateIntoReferenceDate = (utils, dateToTransferFrom, sections,
   return mergedDate;
 }, referenceDate);
 export const isAndroid = () => navigator.userAgent.toLowerCase().indexOf('android') > -1;
-export const clampDaySection = (utils, sections, sectionsValueBoundaries) => {
+export const 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
+  const canClamp = sections.every(section => section.type === 'weekDay' || section.value !== '') && sections.some(section => 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.
   const sectionsForStartOfMonth = sections.map(section => {
     if (section.type !== 'day') {

package/internals/hooks/useField/useFieldCharacterEditing.d.ts

@@ -1,4 +1,5 @@
-import { FieldSectionsValueBoundaries, FieldSection } from './useField.types';
+import { FieldSection } from '../../../models';
+import { FieldSectionsValueBoundaries } from './useField.types';
 import { UpdateSectionValueParams } from './useFieldState';
 interface ApplyCharacterEditingParams {
     keyPressed: string;

package/internals/hooks/useField/useFieldState.d.ts

@@ -1,4 +1,5 @@
-import { FieldSection, UseFieldForwardedProps, UseFieldInternalProps, UseFieldParams, UseFieldState, FieldSelectedSectionsIndexes, FieldSelectedSections } from './useField.types';
+import { UseFieldForwardedProps, UseFieldInternalProps, UseFieldParams, UseFieldState, FieldSelectedSectionsIndexes } from './useField.types';
+import { FieldSection, FieldSelectedSections } from '../../../models';
 export interface UpdateSectionValueParams<TSection extends FieldSection> {
     /**
      * The section on which we want to apply the new value.
@@ -23,4 +24,5 @@ export declare const useFieldState: <TValue, TDate, TSection extends FieldSectio
     updateValueFromValueStr: (valueStr: string) => void;
     setTempAndroidValueStr: (tempValueStrAndroid: string | null) => void;
     sectionsValueBoundaries: import("./useField.types").FieldSectionsValueBoundaries<TDate>;
+    placeholder: string;
 };