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

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { getMonthsInYear } from '../../utils/date-utils';
 export const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
   const config = utils.formatTokenMap[formatToken];
@@ -225,93 +224,6 @@ export const getSectionVisibleValue = (section, target, localizedDigits) => {
   }
   return value;
 };
-export const cleanString = dirtyString => dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
-export const addPositionPropertiesToSections = (sections, localizedDigits, isRTL) => {
-  let position = 0;
-  let positionInInput = isRTL ? 1 : 0;
-  const newSections = [];
-  for (let i = 0; i < sections.length; i += 1) {
-    const section = sections[i];
-    const renderedValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr', 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(_extends({}, 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;
-};
-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;
-      }
-  }
-};
 export const changeSectionValueFormat = (utils, valueStr, currentFormat, newFormat) => {
   if (process.env.NODE_ENV !== 'production') {
     if (getDateSectionConfigFromFormatToken(utils, currentFormat).type === 'weekDay') {
@@ -367,142 +279,6 @@ export const doesSectionFormatHaveLeadingZeros = (utils, timezone, contentType,
       }
   }
 };
-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;
-};
-export 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(_extends({}, 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.
@@ -527,7 +303,10 @@ export const getDateFromDateSections = (utils, sections, localizedDigits) => {
   const dateWithoutSeparatorStr = sectionValues.join(' ');
   return utils.parse(dateWithoutSeparatorStr, formatWithoutSeparator);
 };
-export const createDateStrForInputFromSections = (sections, localizedDigits, isRTL) => {
+export const createDateStrForV7HiddenInputFromSections = sections => sections.map(section => {
+  return `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`;
+}).join('');
+export 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}`;
@@ -627,7 +406,7 @@ export const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
     }),
     meridiem: () => ({
       minimum: 0,
-      maximum: 0
+      maximum: 1
     }),
     empty: () => ({
       minimum: 0,
@@ -727,9 +506,11 @@ export const mergeDateIntoReferenceDate = (utils, timezone, dateToTransferFrom,
   return mergedDate;
 }, referenceDate);
 export const isAndroid = () => navigator.userAgent.toLowerCase().indexOf('android') > -1;
-export const getSectionOrder = (sections, isRTL) => {
+
+// TODO v8: Remove if we drop the v6 TextField approach.
+export 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;
@@ -779,4 +560,73 @@ export const getSectionOrder = (sections, isRTL) => {
     startIndex: rtl2ltr[0],
     endIndex: rtl2ltr[sections.length - 1]
   };
+};
+export 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;
+};
+export 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;
+  }
+};
+export 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;
+  }
 };

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

@@ -243,13 +243,13 @@ export 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/modern/internals/hooks/useField/useFieldState.js

@@ -3,7 +3,8 @@ import * as React from 'react';
 import useControlled from '@mui/utils/useControlled';
 import { useTheme } from '@mui/material/styles';
 import { useUtils, useLocaleText, useLocalizationContext } from '../useUtils';
-import { addPositionPropertiesToSections, splitFormatIntoSections, mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections, getLocalizedDigits } from './useField.utils';
+import { mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections, parseSelectedSections, getLocalizedDigits } from './useField.utils';
+import { buildSectionsFromFormat } from './buildSectionsFromFormat';
 import { useValueWithTimezone } from '../useValueWithTimezone';
 import { getSectionTypeGranularity } from '../../utils/getDefaultReferenceDate';
 export const useFieldState = params => {
@@ -28,7 +29,8 @@ export const useFieldState = params => {
       selectedSections: selectedSectionsProp,
       onSelectedSectionsChange,
       shouldRespectLeadingZeros = false,
-      timezone: timezoneProp
+      timezone: timezoneProp,
+      enableAccessibleFieldDOMStructure = false
     }
   } = params;
   const {
@@ -44,8 +46,18 @@ export const useFieldState = params => {
   });
   const localizedDigits = React.useMemo(() => getLocalizedDigits(utils), [utils]);
   const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils, localizedDigits, timezone), [utils, localizedDigits, timezone]);
-  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, localizedDigits, isRTL, date => splitFormatIntoSections(utils, timezone, localeText, localizedDigits, format, date, formatDensity, shouldRespectLeadingZeros, isRTL)), [fieldValueManager, format, localeText, localizedDigits, isRTL, shouldRespectLeadingZeros, utils, formatDensity, timezone]);
-  const placeholder = React.useMemo(() => fieldValueManager.getValueStrFromSections(getSectionsFromValue(valueManager.emptyValue), localizedDigits, isRTL), [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, localizedDigits, isRTL]);
+  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, date => 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);
     validateSections(sections, valueType);
@@ -72,45 +84,14 @@ export const useFieldState = params => {
     controlled: selectedSectionsProp,
     default: null,
     name: 'useField',
-    state: 'selectedSectionIndexes'
+    state: 'selectedSections'
   });
   const setSelectedSections = newSelectedSections => {
     innerSetSelectedSections(newSelectedSections);
     onSelectedSectionsChange?.(newSelectedSections);
-    setState(prevState => _extends({}, 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 _extends({}, selectedSections, {
-      shouldSelectBoundarySelectors: selectedSections.startIndex === selectedSections.endIndex && state.sections[selectedSections.startIndex].type === 'empty'
-    });
-  }, [selectedSections, state.sections]);
+  const parsedSelectedSections = React.useMemo(() => parseSelectedSections(selectedSections, state.sections), [selectedSections, state.sections]);
+  const activeSectionIndex = parsedSelectedSections === 'all' ? 0 : parsedSelectedSections;
   const publishValue = ({
     value,
     referenceValue,
@@ -143,7 +124,7 @@ export const useFieldState = params => {
       value: newSectionValue,
       modified: true
     });
-    return addPositionPropertiesToSections(newSections, localizedDigits, isRTL);
+    return newSections;
   };
   const clearValue = () => {
     publishValue({
@@ -153,26 +134,19 @@ export 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(_extends({}, newValues, {
-        sections: newSections
-      }));
-    } else {
-      setState(prevState => _extends({}, prevState, newValues, {
-        sections: newSections,
-        tempValueStrAndroid: null
-      }));
-    }
+    publishValue(_extends({}, newValues, {
+      sections: newSections
+    }));
   };
   const updateValueFromValueStr = valueStr => {
     const parseDateStr = (dateStr, referenceDate) => {
@@ -180,7 +154,18 @@ export const useFieldState = params => {
       if (date == null || !utils.isValid(date)) {
         return null;
       }
-      const sections = splitFormatIntoSections(utils, timezone, localeText, localizedDigits, format, date, formatDensity, shouldRespectLeadingZeros, isRTL);
+      const sections = buildSectionsFromFormat({
+        utils,
+        timezone,
+        localeText,
+        localizedDigits,
+        format,
+        date,
+        formatDensity,
+        shouldRespectLeadingZeros,
+        enableAccessibleFieldDOMStructure,
+        isRTL
+      });
       return mergeDateIntoReferenceDate(utils, timezone, date, sections, referenceDate, false);
     };
     const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);
@@ -199,17 +184,15 @@ export 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 = getDateFromDateSections(utils, newActiveDateSections, localizedDigits);
     let values;
@@ -251,7 +234,7 @@ export const useFieldState = params => {
     setState(prevState => _extends({}, 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;
@@ -271,16 +254,17 @@ export const useFieldState = params => {
 
   return {
     state,
-    selectedSectionIndexes,
+    activeSectionIndex,
+    parsedSelectedSections,
     setSelectedSections,
     clearValue,
     clearActiveSection,
     updateSectionValue,
     updateValueFromValueStr,
     setTempAndroidValueStr,
+    getSectionsFromValue,
     sectionsValueBoundaries,
     localizedDigits,
-    placeholder,
     timezone
   };
 };