@mui/x-date-pickers 7.0.0-beta.1 → 7.0.0-beta.4

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

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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"));
+exports.validateSections = exports.removeLocalizedDigits = exports.parseSelectedSections = exports.mergeDateIntoReferenceDate = exports.isStringNumber = exports.isAndroid = exports.getSectionsBoundaries = exports.getSectionVisibleValue = exports.getSectionValueText = exports.getSectionValueNow = exports.getSectionOrder = exports.getLocalizedDigits = exports.getLetterEditingOptions = exports.getDaysInWeekStr = exports.getDateSectionConfigFromFormatToken = exports.getDateFromDateSections = exports.doesSectionFormatHaveLeadingZeros = exports.createDateStrForV7HiddenInputFromSections = exports.createDateStrForV6InputFromSections = exports.cleanLeadingZeros = exports.cleanDigitSectionValue = exports.changeSectionValueFormat = exports.applyLocalizedDigits = exports.adjustSectionValue = exports.FORMAT_SECONDS_NO_LEADING_ZEROS = void 0;
 var _dateUtils = require("../../utils/date-utils");
 const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
   const config = utils.formatTokenMap[formatToken];
@@ -243,95 +241,6 @@ const getSectionVisibleValue = (section, target, localizedDigits) => {
   return value;
 };
 exports.getSectionVisibleValue = getSectionVisibleValue;
-const cleanString = dirtyString => dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
-exports.cleanString = cleanString;
-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', localizedDigits);
-    const sectionStr = `${section.startSeparator}${renderedValue}${section.endSeparator}`;
-    const sectionLength = cleanString(sectionStr).length;
-    const sectionLengthInInput = sectionStr.length;
-
-    // The ...InInput values consider the unicode characters but do include them in their indexes
-    const cleanedValue = cleanString(renderedValue);
-    const startInInput = positionInInput + (cleanedValue === '' ? 0 : renderedValue.indexOf(cleanedValue[0])) + section.startSeparator.length;
-    const endInInput = startInInput + cleanedValue.length;
-    newSections.push((0, _extends2.default)({}, section, {
-      start: position,
-      end: position + sectionLength,
-      startInInput,
-      endInInput
-    }));
-    position += sectionLength;
-    // Move position to the end of string associated to the current section
-    positionInInput += sectionLengthInInput;
-  }
-  return newSections;
-};
-exports.addPositionPropertiesToSections = addPositionPropertiesToSections;
-const getSectionPlaceholder = (utils, timezone, localeText, sectionConfig, sectionFormat) => {
-  switch (sectionConfig.type) {
-    case 'year':
-      {
-        return localeText.fieldYearPlaceholder({
-          digitAmount: utils.formatByString(utils.date(undefined, timezone), sectionFormat).length,
-          format: sectionFormat
-        });
-      }
-    case 'month':
-      {
-        return localeText.fieldMonthPlaceholder({
-          contentType: sectionConfig.contentType,
-          format: sectionFormat
-        });
-      }
-    case 'day':
-      {
-        return localeText.fieldDayPlaceholder({
-          format: sectionFormat
-        });
-      }
-    case 'weekDay':
-      {
-        return localeText.fieldWeekDayPlaceholder({
-          contentType: sectionConfig.contentType,
-          format: sectionFormat
-        });
-      }
-    case 'hours':
-      {
-        return localeText.fieldHoursPlaceholder({
-          format: sectionFormat
-        });
-      }
-    case 'minutes':
-      {
-        return localeText.fieldMinutesPlaceholder({
-          format: sectionFormat
-        });
-      }
-    case 'seconds':
-      {
-        return localeText.fieldSecondsPlaceholder({
-          format: sectionFormat
-        });
-      }
-    case 'meridiem':
-      {
-        return localeText.fieldMeridiemPlaceholder({
-          format: sectionFormat
-        });
-      }
-    default:
-      {
-        return sectionFormat;
-      }
-  }
-};
 const changeSectionValueFormat = (utils, valueStr, currentFormat, newFormat) => {
   if (process.env.NODE_ENV !== 'production') {
     if (getDateSectionConfigFromFormatToken(utils, currentFormat).type === 'weekDay') {
@@ -388,149 +297,12 @@ const doesSectionFormatHaveLeadingZeros = (utils, timezone, contentType, section
       }
   }
 };
-exports.doesSectionFormatHaveLeadingZeros = doesSectionFormatHaveLeadingZeros;
-const getEscapedPartsFromFormat = (utils, format) => {
-  const escapedParts = [];
-  const {
-    start: startChar,
-    end: endChar
-  } = utils.escapedCharacters;
-  const regExp = new RegExp(`(\\${startChar}[^\\${endChar}]*\\${endChar})+`, 'g');
-  let match = null;
-  // eslint-disable-next-line no-cond-assign
-  while (match = regExp.exec(format)) {
-    escapedParts.push({
-      start: match.index,
-      end: regExp.lastIndex - 1
-    });
-  }
-  return escapedParts;
-};
-const splitFormatIntoSections = (utils, timezone, localeText, localizedDigits, format, date, formatDensity, shouldRespectLeadingZeros, isRTL) => {
-  let startSeparator = '';
-  const sections = [];
-  const now = utils.date();
-  const commitToken = token => {
-    if (token === '') {
-      return null;
-    }
-    const sectionConfig = getDateSectionConfigFromFormatToken(utils, token);
-    const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, timezone, sectionConfig.contentType, sectionConfig.type, token);
-    const hasLeadingZerosInInput = shouldRespectLeadingZeros ? hasLeadingZerosInFormat : sectionConfig.contentType === 'digit';
-    const isValidDate = date != null && utils.isValid(date);
-    let sectionValue = isValidDate ? utils.formatByString(date, token) : '';
-    let maxLength = null;
-    if (hasLeadingZerosInInput) {
-      if (hasLeadingZerosInFormat) {
-        maxLength = sectionValue === '' ? utils.formatByString(now, token).length : sectionValue.length;
-      } else {
-        if (sectionConfig.maxLength == null) {
-          throw new Error(`MUI X: The token ${token} should have a 'maxDigitNumber' property on it's adapter`);
-        }
-        maxLength = sectionConfig.maxLength;
-        if (isValidDate) {
-          sectionValue = applyLocalizedDigits(cleanLeadingZeros(removeLocalizedDigits(sectionValue, localizedDigits), maxLength), localizedDigits);
-        }
-      }
-    }
-    sections.push((0, _extends2.default)({}, sectionConfig, {
-      format: token,
-      maxLength,
-      value: sectionValue,
-      placeholder: getSectionPlaceholder(utils, timezone, localeText, sectionConfig, token),
-      hasLeadingZerosInFormat,
-      hasLeadingZerosInInput,
-      startSeparator: sections.length === 0 ? startSeparator : '',
-      endSeparator: '',
-      modified: false
-    }));
-    return null;
-  };
-
-  // 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 X: 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).sort((a, b) => b.length - a.length) // Sort to put longest word first
-  .join('|')})`, 'g') // used to get access to lastIndex state
-  ;
-  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)}`;
-    const regExpMatch = isTokenStartRegExp.test(potentialToken);
-    if (!isEscapedChar && char.match(/([A-Za-z]+)/) && regExpMatch) {
-      currentTokenValue = potentialToken.slice(0, isTokenStartRegExp.lastIndex);
-      i += isTokenStartRegExp.lastIndex - 1;
-    } 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?.start === i || escapedPartOfCurrentChar?.end === i;
-      if (!isEscapeBoundary) {
-        commitToken(currentTokenValue);
-        currentTokenValue = '';
-        if (sections.length === 0) {
-          startSeparator += char;
-        } else {
-          sections[sections.length - 1].endSeparator += char;
-        }
-      }
-    }
-  }
-  commitToken(currentTokenValue);
-  if (sections.length === 0 && startSeparator.length > 0) {
-    sections.push({
-      type: 'empty',
-      contentType: 'letter',
-      maxLength: null,
-      format: '',
-      value: '',
-      placeholder: '',
-      hasLeadingZerosInFormat: false,
-      hasLeadingZerosInInput: false,
-      startSeparator,
-      endSeparator: '',
-      modified: false
-    });
-  }
-  return sections.map(section => {
-    const cleanSeparator = separator => {
-      let cleanedSeparator = separator;
-      if (isRTL && cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
-        cleanedSeparator = `\u2069${cleanedSeparator}\u2066`;
-      }
-      if (formatDensity === 'spacious' && ['/', '.', '-'].includes(cleanedSeparator)) {
-        cleanedSeparator = ` ${cleanedSeparator} `;
-      }
-      return cleanedSeparator;
-    };
-    section.startSeparator = cleanSeparator(section.startSeparator);
-    section.endSeparator = cleanSeparator(section.endSeparator);
-    return section;
-  });
-};
 
 /**
  * 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.
  */
-exports.splitFormatIntoSections = splitFormatIntoSections;
+exports.doesSectionFormatHaveLeadingZeros = doesSectionFormatHaveLeadingZeros;
 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.
@@ -551,7 +323,11 @@ const getDateFromDateSections = (utils, sections, localizedDigits) => {
   return utils.parse(dateWithoutSeparatorStr, formatWithoutSeparator);
 };
 exports.getDateFromDateSections = getDateFromDateSections;
-const createDateStrForInputFromSections = (sections, localizedDigits, isRTL) => {
+const createDateStrForV7HiddenInputFromSections = sections => sections.map(section => {
+  return `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`;
+}).join('');
+exports.createDateStrForV7HiddenInputFromSections = createDateStrForV7HiddenInputFromSections;
+const createDateStrForV6InputFromSections = (sections, localizedDigits, isRTL) => {
   const formattedSections = sections.map(section => {
     const dateValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr', localizedDigits);
     return `${section.startSeparator}${dateValue}${section.endSeparator}`;
@@ -568,7 +344,7 @@ const createDateStrForInputFromSections = (sections, localizedDigits, isRTL) =>
   // wrap into an isolated group such that separators can split the string in smaller ones by adding \u2069\u2068
   return `\u2066${dateStr}\u2069`;
 };
-exports.createDateStrForInputFromSections = createDateStrForInputFromSections;
+exports.createDateStrForV6InputFromSections = createDateStrForV6InputFromSections;
 const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
   const today = utils.date(undefined, timezone);
   const endOfYear = utils.endOfYear(today);
@@ -652,7 +428,7 @@ const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
     }),
     meridiem: () => ({
       minimum: 0,
-      maximum: 0
+      maximum: 1
     }),
     empty: () => ({
       minimum: 0,
@@ -755,10 +531,12 @@ const mergeDateIntoReferenceDate = (utils, timezone, dateToTransferFrom, section
 }, referenceDate);
 exports.mergeDateIntoReferenceDate = mergeDateIntoReferenceDate;
 const isAndroid = () => navigator.userAgent.toLowerCase().indexOf('android') > -1;
+
+// TODO v8: Remove if we drop the v6 TextField approach.
 exports.isAndroid = isAndroid;
-const getSectionOrder = (sections, isRTL) => {
+const getSectionOrder = (sections, shouldApplyRTL) => {
   const neighbors = {};
-  if (!isRTL) {
+  if (!shouldApplyRTL) {
     sections.forEach((_, index) => {
       const leftIndex = index === 0 ? null : index - 1;
       const rightIndex = index === sections.length - 1 ? null : index + 1;
@@ -809,4 +587,76 @@ const getSectionOrder = (sections, isRTL) => {
     endIndex: rtl2ltr[sections.length - 1]
   };
 };
-exports.getSectionOrder = getSectionOrder;
+exports.getSectionOrder = getSectionOrder;
+const parseSelectedSections = (selectedSections, sections) => {
+  if (selectedSections == null) {
+    return null;
+  }
+  if (selectedSections === 'all') {
+    return 'all';
+  }
+  if (typeof selectedSections === 'string') {
+    return sections.findIndex(section => section.type === selectedSections);
+  }
+  return selectedSections;
+};
+exports.parseSelectedSections = parseSelectedSections;
+const getSectionValueText = (section, utils) => {
+  if (!section.value) {
+    return undefined;
+  }
+  switch (section.type) {
+    case 'month':
+      {
+        if (section.contentType === 'digit') {
+          return utils.format(utils.setMonth(utils.date(), Number(section.value) - 1), 'month');
+        }
+        const parsedDate = utils.parse(section.value, section.format);
+        return parsedDate ? utils.format(parsedDate, 'month') : undefined;
+      }
+    case 'day':
+      return section.contentType === 'digit' ? utils.format(utils.setDate(utils.startOfYear(utils.date()), Number(section.value)), 'dayOfMonthFull') : section.value;
+    case 'weekDay':
+      // TODO: improve by providing the label of the week day
+      return undefined;
+    default:
+      return undefined;
+  }
+};
+exports.getSectionValueText = getSectionValueText;
+const getSectionValueNow = (section, utils) => {
+  if (!section.value) {
+    return undefined;
+  }
+  switch (section.type) {
+    case 'weekDay':
+      {
+        if (section.contentType === 'letter') {
+          // TODO: improve by resolving the week day number from a letter week day
+          return undefined;
+        }
+        return Number(section.value);
+      }
+    case 'meridiem':
+      {
+        const parsedDate = utils.parse(`01:00 ${section.value}`, `${utils.formats.hours12h}:${utils.formats.minutes} ${section.format}`);
+        if (parsedDate) {
+          return utils.getHours(parsedDate) >= 12 ? 1 : 0;
+        }
+        return undefined;
+      }
+    case 'day':
+      return section.contentType === 'digit-with-letter' ? parseInt(section.value, 10) : Number(section.value);
+    case 'month':
+      {
+        if (section.contentType === 'digit') {
+          return Number(section.value);
+        }
+        const parsedDate = utils.parse(section.value, section.format);
+        return parsedDate ? utils.getMonth(parsedDate) + 1 : undefined;
+      }
+    default:
+      return section.contentType !== 'letter' ? Number(section.value) : undefined;
+  }
+};
+exports.getSectionValueNow = getSectionValueNow;

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

@@ -251,13 +251,13 @@ const useFieldCharacterEditing = ({
     })) : applyLetterEditing(params);
     if (response == null) {
       setTempAndroidValueStr(null);
-    } else {
-      updateSectionValue({
-        activeSection,
-        newSectionValue: response.sectionValue,
-        shouldGoToNextSection: response.shouldGoToNextSection
-      });
+      return;
     }
+    updateSectionValue({
+      activeSection,
+      newSectionValue: response.sectionValue,
+      shouldGoToNextSection: response.shouldGoToNextSection
+    });
   });
   return {
     applyCharacterEditing,

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

@@ -11,6 +11,7 @@ var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"))
 var _styles = require("@mui/material/styles");
 var _useUtils = require("../useUtils");
 var _useField = require("./useField.utils");
+var _buildSectionsFromFormat = require("./buildSectionsFromFormat");
 var _useValueWithTimezone = require("../useValueWithTimezone");
 var _getDefaultReferenceDate = require("../../utils/getDefaultReferenceDate");
 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); }
@@ -37,7 +38,8 @@ const useFieldState = params => {
       selectedSections: selectedSectionsProp,
       onSelectedSectionsChange,
       shouldRespectLeadingZeros = false,
-      timezone: timezoneProp
+      timezone: timezoneProp,
+      enableAccessibleFieldDOMStructure = false
     }
   } = params;
   const {
@@ -53,8 +55,18 @@ const useFieldState = params => {
   });
   const localizedDigits = React.useMemo(() => (0, _useField.getLocalizedDigits)(utils), [utils]);
   const sectionsValueBoundaries = React.useMemo(() => (0, _useField.getSectionsBoundaries)(utils, localizedDigits, timezone), [utils, localizedDigits, timezone]);
-  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, localizedDigits, isRTL, date => (0, _useField.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 getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, date => (0, _buildSectionsFromFormat.buildSectionsFromFormat)({
+    utils,
+    timezone,
+    localeText,
+    localizedDigits,
+    format,
+    date,
+    formatDensity,
+    shouldRespectLeadingZeros,
+    enableAccessibleFieldDOMStructure,
+    isRTL
+  })), [fieldValueManager, format, localeText, localizedDigits, isRTL, shouldRespectLeadingZeros, utils, formatDensity, timezone, enableAccessibleFieldDOMStructure]);
   const [state, setState] = React.useState(() => {
     const sections = getSectionsFromValue(valueFromTheOutside);
     (0, _useField.validateSections)(sections, valueType);
@@ -81,45 +93,14 @@ const useFieldState = params => {
     controlled: selectedSectionsProp,
     default: null,
     name: 'useField',
-    state: 'selectedSectionIndexes'
+    state: 'selectedSections'
   });
   const setSelectedSections = newSelectedSections => {
     innerSetSelectedSections(newSelectedSections);
     onSelectedSectionsChange?.(newSelectedSections);
-    setState(prevState => (0, _extends2.default)({}, prevState, {
-      selectedSectionQuery: null
-    }));
   };
-  const selectedSectionIndexes = React.useMemo(() => {
-    if (selectedSections == null) {
-      return null;
-    }
-    if (selectedSections === 'all') {
-      return {
-        startIndex: 0,
-        endIndex: state.sections.length - 1,
-        shouldSelectBoundarySelectors: true
-      };
-    }
-    if (typeof selectedSections === 'number') {
-      return {
-        startIndex: selectedSections,
-        endIndex: selectedSections,
-        shouldSelectBoundarySelectors: state.sections[selectedSections].type === 'empty'
-      };
-    }
-    if (typeof selectedSections === 'string') {
-      const selectedSectionIndex = state.sections.findIndex(section => section.type === selectedSections);
-      return {
-        startIndex: selectedSectionIndex,
-        endIndex: selectedSectionIndex,
-        shouldSelectBoundarySelectors: state.sections[selectedSectionIndex].type === 'empty'
-      };
-    }
-    return (0, _extends2.default)({}, selectedSections, {
-      shouldSelectBoundarySelectors: selectedSections.startIndex === selectedSections.endIndex && state.sections[selectedSections.startIndex].type === 'empty'
-    });
-  }, [selectedSections, state.sections]);
+  const parsedSelectedSections = React.useMemo(() => (0, _useField.parseSelectedSections)(selectedSections, state.sections), [selectedSections, state.sections]);
+  const activeSectionIndex = parsedSelectedSections === 'all' ? 0 : parsedSelectedSections;
   const publishValue = ({
     value,
     referenceValue,
@@ -152,7 +133,7 @@ const useFieldState = params => {
       value: newSectionValue,
       modified: true
     });
-    return (0, _useField.addPositionPropertiesToSections)(newSections, localizedDigits, isRTL);
+    return newSections;
   };
   const clearValue = () => {
     publishValue({
@@ -162,26 +143,19 @@ const useFieldState = params => {
     });
   };
   const clearActiveSection = () => {
-    if (selectedSectionIndexes == null) {
+    if (activeSectionIndex == null) {
       return;
     }
-    const activeSection = state.sections[selectedSectionIndexes.startIndex];
+    const activeSection = state.sections[activeSectionIndex];
     const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
     const nonEmptySectionCountBefore = activeDateManager.getSections(state.sections).filter(section => section.value !== '').length;
     const hasNoOtherNonEmptySections = nonEmptySectionCountBefore === (activeSection.value === '' ? 0 : 1);
-    const newSections = setSectionValue(selectedSectionIndexes.startIndex, '');
+    const newSections = setSectionValue(activeSectionIndex, '');
     const newActiveDate = hasNoOtherNonEmptySections ? null : utils.getInvalidDate();
     const newValues = activeDateManager.getNewValuesFromNewActiveDate(newActiveDate);
-    if ((newActiveDate != null && !utils.isValid(newActiveDate)) !== (activeDateManager.date != null && !utils.isValid(activeDateManager.date))) {
-      publishValue((0, _extends2.default)({}, newValues, {
-        sections: newSections
-      }));
-    } else {
-      setState(prevState => (0, _extends2.default)({}, prevState, newValues, {
-        sections: newSections,
-        tempValueStrAndroid: null
-      }));
-    }
+    publishValue((0, _extends2.default)({}, newValues, {
+      sections: newSections
+    }));
   };
   const updateValueFromValueStr = valueStr => {
     const parseDateStr = (dateStr, referenceDate) => {
@@ -189,7 +163,18 @@ const useFieldState = params => {
       if (date == null || !utils.isValid(date)) {
         return null;
       }
-      const sections = (0, _useField.splitFormatIntoSections)(utils, timezone, localeText, localizedDigits, format, date, formatDensity, shouldRespectLeadingZeros, isRTL);
+      const sections = (0, _buildSectionsFromFormat.buildSectionsFromFormat)({
+        utils,
+        timezone,
+        localeText,
+        localizedDigits,
+        format,
+        date,
+        formatDensity,
+        shouldRespectLeadingZeros,
+        enableAccessibleFieldDOMStructure,
+        isRTL
+      });
       return (0, _useField.mergeDateIntoReferenceDate)(utils, timezone, date, sections, referenceDate, false);
     };
     const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);
@@ -208,17 +193,15 @@ const useFieldState = params => {
     /**
      * 1. Decide which section should be focused
      */
-    if (shouldGoToNextSection && selectedSectionIndexes && selectedSectionIndexes.startIndex < state.sections.length - 1) {
-      setSelectedSections(selectedSectionIndexes.startIndex + 1);
-    } else if (selectedSectionIndexes && selectedSectionIndexes.startIndex !== selectedSectionIndexes.endIndex) {
-      setSelectedSections(selectedSectionIndexes.startIndex);
+    if (shouldGoToNextSection && activeSectionIndex < state.sections.length - 1) {
+      setSelectedSections(activeSectionIndex + 1);
     }
 
     /**
      * 2. Try to build a valid date from the new section value
      */
     const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
-    const newSections = setSectionValue(selectedSectionIndexes.startIndex, newSectionValue);
+    const newSections = setSectionValue(activeSectionIndex, newSectionValue);
     const newActiveDateSections = activeDateManager.getSections(newSections);
     const newActiveDate = (0, _useField.getDateFromDateSections)(utils, newActiveDateSections, localizedDigits);
     let values;
@@ -260,7 +243,7 @@ const useFieldState = params => {
     setState(prevState => (0, _extends2.default)({}, prevState, {
       sections
     }));
-  }, [format, utils.locale]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [format, utils.locale, isRTL]); // eslint-disable-line react-hooks/exhaustive-deps
 
   React.useEffect(() => {
     let shouldUpdate;
@@ -280,16 +263,17 @@ const useFieldState = params => {
 
   return {
     state,
-    selectedSectionIndexes,
+    activeSectionIndex,
+    parsedSelectedSections,
     setSelectedSections,
     clearValue,
     clearActiveSection,
     updateSectionValue,
     updateValueFromValueStr,
     setTempAndroidValueStr,
+    getSectionsFromValue,
     sectionsValueBoundaries,
     localizedDigits,
-    placeholder,
     timezone
   };
 };