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

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

@@ -1,11 +1,11 @@
-import { FieldSection, PickersTimezone } from '../../../models';
+import { FieldSection, PickersTimezone, PickerValidDate } from '../../../models';
 import { FieldSectionsValueBoundaries } from './useField.types';
 import { UpdateSectionValueParams } from './useFieldState';
-interface ApplyCharacterEditingParams {
+export interface ApplyCharacterEditingParams {
     keyPressed: string;
     sectionIndex: number;
 }
-interface UseFieldEditingParams<TDate, TSection extends FieldSection> {
+interface UseFieldCharacterEditingParams<TDate extends PickerValidDate, TSection extends FieldSection> {
     sections: TSection[];
     updateSectionValue: (params: UpdateSectionValueParams<TSection>) => void;
     sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>;
@@ -13,6 +13,10 @@ interface UseFieldEditingParams<TDate, TSection extends FieldSection> {
     setTempAndroidValueStr: (newValue: string | null) => void;
     timezone: PickersTimezone;
 }
+export interface UseFieldCharacterEditingResponse {
+    applyCharacterEditing: (params: ApplyCharacterEditingParams) => void;
+    resetCharacterQuery: () => void;
+}
 /**
  * Update the active section value when the user pressed a key that is not a navigation key (arrow key for example).
  * This hook has two main editing behaviors
@@ -20,8 +24,5 @@ interface UseFieldEditingParams<TDate, TSection extends FieldSection> {
  * 1. The numeric editing when the user presses a digit
  * 2. The letter editing when the user presses another key
  */
-export declare const useFieldCharacterEditing: <TDate, TSection extends FieldSection>({ sections, updateSectionValue, sectionsValueBoundaries, localizedDigits, setTempAndroidValueStr, timezone, }: UseFieldEditingParams<TDate, TSection>) => {
-    applyCharacterEditing: (params: ApplyCharacterEditingParams) => void;
-    resetCharacterQuery: () => void;
-};
+export declare const useFieldCharacterEditing: <TDate extends PickerValidDate, TSection extends FieldSection>({ sections, updateSectionValue, sectionsValueBoundaries, localizedDigits, setTempAndroidValueStr, timezone, }: UseFieldCharacterEditingParams<TDate, TSection>) => UseFieldCharacterEditingResponse;
 export {};

package/internals/hooks/useField/useFieldCharacterEditing.js

@@ -244,13 +244,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/internals/hooks/useField/useFieldState.d.ts

@@ -1,5 +1,5 @@
-import { UseFieldForwardedProps, UseFieldInternalProps, UseFieldParams, UseFieldState, FieldSelectedSectionsIndexes } from './useField.types';
-import { FieldSection, FieldSelectedSections } from '../../../models';
+import { UseFieldInternalProps, UseFieldParams, UseFieldState, FieldParsedSelectedSections, FieldSectionsValueBoundaries, UseFieldForwardedProps } from './useField.types';
+import { FieldSection, FieldSelectedSections, PickersTimezone, PickerValidDate } from '../../../models';
 export interface UpdateSectionValueParams<TSection extends FieldSection> {
     /**
      * The section on which we want to apply the new value.
@@ -14,17 +14,19 @@ export interface UpdateSectionValueParams<TSection extends FieldSection> {
      */
     shouldGoToNextSection: boolean;
 }
-export declare const useFieldState: <TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any, any>>(params: UseFieldParams<TValue, TDate, TSection, TForwardedProps, TInternalProps>) => {
+export interface UseFieldStateResponse<TValue, TDate extends PickerValidDate, TSection extends FieldSection> {
     state: UseFieldState<TValue, TSection>;
-    selectedSectionIndexes: FieldSelectedSectionsIndexes | null;
-    setSelectedSections: (newSelectedSections: FieldSelectedSections) => void;
+    activeSectionIndex: number | null;
+    parsedSelectedSections: FieldParsedSelectedSections;
+    setSelectedSections: (sections: FieldSelectedSections) => void;
     clearValue: () => void;
     clearActiveSection: () => void;
-    updateSectionValue: ({ activeSection, newSectionValue, shouldGoToNextSection, }: UpdateSectionValueParams<TSection>) => void;
+    updateSectionValue: (params: UpdateSectionValueParams<TSection>) => void;
     updateValueFromValueStr: (valueStr: string) => void;
-    setTempAndroidValueStr: (tempValueStrAndroid: string | null) => void;
-    sectionsValueBoundaries: import("./useField.types").FieldSectionsValueBoundaries<TDate>;
+    setTempAndroidValueStr: (tempAndroidValueStr: string | null) => void;
+    sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>;
+    getSectionsFromValue: (value: TValue, fallbackSections?: TSection[] | null) => TSection[];
     localizedDigits: string[];
-    placeholder: string;
-    timezone: string;
-};
+    timezone: PickersTimezone;
+}
+export declare const useFieldState: <TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<any, any, any, any, any>>(params: UseFieldParams<TValue, TDate, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => UseFieldStateResponse<TValue, TDate, TSection>;

package/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 == null || 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
   };
 };

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

@@ -0,0 +1,25 @@
+import { UseFieldTextField } from './useField.types';
+import { FieldSection } from '../../../models';
+type FieldSectionWithPositions<TSection> = TSection & {
+    /**
+     * 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;
+};
+export declare const addPositionPropertiesToSections: <TSection extends FieldSection>(sections: TSection[], localizedDigits: string[], isRTL: boolean) => FieldSectionWithPositions<TSection>[];
+export declare const useFieldV6TextField: UseFieldTextField<false>;
+export {};

package/internals/hooks/useField/useFieldV6TextField.js

@@ -0,0 +1,324 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useForkRef from '@mui/utils/useForkRef';
+import { getActiveElement } from '../../utils/utils';
+import { getSectionVisibleValue, isAndroid } from './useField.utils';
+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;
+};
+export const useFieldV6TextField = params => {
+  const theme = useTheme();
+  const isRTL = theme.direction === 'rtl';
+  const focusTimeoutRef = React.useRef(undefined);
+  const {
+    forwardedProps: {
+      onFocus,
+      onClick,
+      onPaste,
+      onBlur,
+      inputRef: inputRefProp
+    },
+    internalProps: {
+      readOnly = false
+    },
+    parsedSelectedSections,
+    activeSectionIndex,
+    state,
+    fieldValueManager,
+    valueManager,
+    applyCharacterEditing,
+    resetCharacterQuery,
+    updateSectionValue,
+    updateValueFromValueStr,
+    clearActiveSection,
+    clearValue,
+    setTempAndroidValueStr,
+    setSelectedSections,
+    getSectionsFromValue,
+    areAllSectionsEmpty,
+    localizedDigits
+  } = params;
+  const inputRef = React.useRef(null);
+  const handleRef = useForkRef(inputRefProp, inputRef);
+  const sections = React.useMemo(() => addPositionPropertiesToSections(state.sections, localizedDigits, isRTL), [state.sections, localizedDigits, isRTL]);
+  const interactions = React.useMemo(() => ({
+    syncSelectionToDOM: () => {
+      if (!inputRef.current) {
+        return;
+      }
+      if (parsedSelectedSections == null) {
+        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;
+      }
+
+      // On multi input range pickers we want to update selection range only for the active input
+      // This helps to avoid the focus jumping on Safari https://github.com/mui/mui-x/issues/9003
+      // because WebKit implements the `setSelectionRange` based on the spec: https://bugs.webkit.org/show_bug.cgi?id=224425
+      if (inputRef.current !== getActiveElement(document)) {
+        return;
+      }
+
+      // Fix scroll jumping on iOS browser: https://github.com/mui/mui-x/issues/8321
+      const currentScrollTop = inputRef.current.scrollTop;
+      if (parsedSelectedSections === 'all') {
+        inputRef.current.select();
+      } else {
+        const selectedSection = sections[parsedSelectedSections];
+        const selectionStart = selectedSection.type === 'empty' ? selectedSection.startInInput - selectedSection.startSeparator.length : selectedSection.startInInput;
+        const selectionEnd = selectedSection.type === 'empty' ? selectedSection.endInInput + selectedSection.endSeparator.length : selectedSection.endInInput;
+        if (selectionStart !== inputRef.current.selectionStart || selectionEnd !== inputRef.current.selectionEnd) {
+          if (inputRef.current === getActiveElement(document)) {
+            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;
+    },
+    getActiveSectionIndexFromDOM: () => {
+      var _selectionStart, _selectionEnd;
+      const browserStartIndex = (_selectionStart = inputRef.current.selectionStart) != null ? _selectionStart : 0;
+      const browserEndIndex = (_selectionEnd = inputRef.current.selectionEnd) != null ? _selectionEnd : 0;
+      if (browserStartIndex === 0 && browserEndIndex === 0) {
+        return null;
+      }
+      const nextSectionIndex = browserStartIndex <= sections[0].startInInput ? 1 // Special case if browser index is in invisible characters at the beginning.
+      : sections.findIndex(section => section.startInInput - section.startSeparator.length > browserStartIndex);
+      return nextSectionIndex === -1 ? sections.length - 1 : nextSectionIndex - 1;
+    },
+    focusField: (newSelectedSection = 0) => {
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
+      setSelectedSections(newSelectedSection);
+    },
+    setSelectedSections: newSelectedSections => setSelectedSections(newSelectedSections),
+    isFieldFocused: () => inputRef.current === getActiveElement(document)
+  }), [inputRef, parsedSelectedSections, sections, setSelectedSections]);
+  const syncSelectionFromDOM = () => {
+    var _selectionStart2;
+    if (readOnly) {
+      setSelectedSections(null);
+      return;
+    }
+    const browserStartIndex = (_selectionStart2 = inputRef.current.selectionStart) != null ? _selectionStart2 : 0;
+    let nextSectionIndex;
+    if (browserStartIndex <= sections[0].startInInput) {
+      // Special case if browser index is in invisible characters at the beginning
+      nextSectionIndex = 1;
+    } else if (browserStartIndex >= sections[sections.length - 1].endInInput) {
+      // If the click is after the last character of the input, then we want to select the 1st section.
+      nextSectionIndex = 1;
+    } else {
+      nextSectionIndex = sections.findIndex(section => section.startInInput - section.startSeparator.length > browserStartIndex);
+    }
+    const sectionIndex = nextSectionIndex === -1 ? sections.length - 1 : nextSectionIndex - 1;
+    setSelectedSections(sectionIndex);
+  };
+  const handleInputFocus = useEventCallback((...args) => {
+    onFocus == null || onFocus(...args);
+    // The ref is guaranteed to be resolved at this point.
+    const input = inputRef.current;
+    window.clearTimeout(focusTimeoutRef.current);
+    focusTimeoutRef.current = setTimeout(() => {
+      // The ref changed, the component got remounted, the focus event is no longer relevant.
+      if (!input || input !== inputRef.current) {
+        return;
+      }
+      if (activeSectionIndex != null || readOnly) {
+        return;
+      }
+      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');
+      } else {
+        syncSelectionFromDOM();
+      }
+    });
+  });
+  const handleInputClick = useEventCallback((event, ...args) => {
+    // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
+    // We avoid this by checking if the call of `handleInputClick` is actually intended, or a side effect.
+    if (event.isDefaultPrevented()) {
+      return;
+    }
+    onClick == null || onClick(event, ...args);
+    syncSelectionFromDOM();
+  });
+  const handleInputPaste = useEventCallback(event => {
+    onPaste == null || onPaste(event);
+
+    // prevent default to avoid the input `onChange` handler being called
+    event.preventDefault();
+    if (readOnly) {
+      return;
+    }
+    const pastedValue = event.clipboardData.getData('text');
+    if (typeof parsedSelectedSections === 'number') {
+      const activeSection = state.sections[parsedSelectedSections];
+      const lettersOnly = /^[a-zA-Z]+$/.test(pastedValue);
+      const digitsOnly = /^[0-9]+$/.test(pastedValue);
+      const digitsAndLetterOnly = /^(([a-zA-Z]+)|)([0-9]+)(([a-zA-Z]+)|)$/.test(pastedValue);
+      const isValidPastedValue = activeSection.contentType === 'letter' && lettersOnly || activeSection.contentType === 'digit' && digitsOnly || activeSection.contentType === 'digit-with-letter' && digitsAndLetterOnly;
+      if (isValidPastedValue) {
+        resetCharacterQuery();
+        updateSectionValue({
+          activeSection,
+          newSectionValue: pastedValue,
+          shouldGoToNextSection: true
+        });
+        return;
+      }
+      if (lettersOnly || digitsOnly) {
+        // The pasted value corresponds to a single section, but not the expected type,
+        // skip the modification
+        return;
+      }
+    }
+    resetCharacterQuery();
+    updateValueFromValueStr(pastedValue);
+  });
+  const handleContainerBlur = useEventCallback((...args) => {
+    onBlur == null || onBlur(...args);
+    setSelectedSections(null);
+  });
+  const handleInputChange = useEventCallback(event => {
+    if (readOnly) {
+      return;
+    }
+    const targetValue = event.target.value;
+    if (targetValue === '') {
+      resetCharacterQuery();
+      clearValue();
+      return;
+    }
+    const eventData = event.nativeEvent.data;
+    // Calling `.fill(04/11/2022)` in playwright will trigger a change event with the requested content to insert in `event.nativeEvent.data`
+    // usual changes have only the currently typed character in the `event.nativeEvent.data`
+    const shouldUseEventData = eventData && eventData.length > 1;
+    const valueStr = shouldUseEventData ? eventData : targetValue;
+    const cleanValueStr = cleanString(valueStr);
+
+    // If no section is selected or eventData should be used, we just try to parse the new value
+    // This line is mostly triggered by imperative code / application tests.
+    if (activeSectionIndex == null || shouldUseEventData) {
+      updateValueFromValueStr(shouldUseEventData ? eventData : cleanValueStr);
+      return;
+    }
+    let keyPressed;
+    if (parsedSelectedSections === 'all' && cleanValueStr.length === 1) {
+      keyPressed = cleanValueStr;
+    } else {
+      const prevValueStr = cleanString(fieldValueManager.getV6InputValueFromSections(sections, localizedDigits, isRTL));
+      let startOfDiffIndex = -1;
+      let endOfDiffIndex = -1;
+      for (let 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;
+        }
+      }
+      const activeSection = sections[activeSectionIndex];
+      const 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.
+      const activeSectionEndRelativeToNewValue = cleanValueStr.length - prevValueStr.length + activeSection.end - cleanString(activeSection.endSeparator || '').length;
+      keyPressed = cleanValueStr.slice(activeSection.start + cleanString(activeSection.startSeparator || '').length, activeSectionEndRelativeToNewValue);
+    }
+    if (keyPressed.length === 0) {
+      if (isAndroid()) {
+        setTempAndroidValueStr(valueStr);
+      } else {
+        resetCharacterQuery();
+        clearActiveSection();
+      }
+      return;
+    }
+    applyCharacterEditing({
+      keyPressed,
+      sectionIndex: activeSectionIndex
+    });
+  });
+  const placeholder = React.useMemo(() => fieldValueManager.getV6InputValueFromSections(getSectionsFromValue(valueManager.emptyValue), localizedDigits, isRTL), [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, localizedDigits, isRTL]);
+  const valueStr = React.useMemo(() => {
+    var _state$tempValueStrAn;
+    return (_state$tempValueStrAn = state.tempValueStrAndroid) != null ? _state$tempValueStrAn : fieldValueManager.getV6InputValueFromSections(state.sections, localizedDigits, isRTL);
+  }, [state.sections, fieldValueManager, state.tempValueStrAndroid, localizedDigits, isRTL]);
+  React.useEffect(() => {
+    // Select all the sections when focused on mount (`autoFocus = true` on the input)
+    if (inputRef.current && inputRef.current === getActiveElement(document)) {
+      setSelectedSections('all');
+    }
+    return () => window.clearTimeout(focusTimeoutRef.current);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const inputMode = React.useMemo(() => {
+    if (activeSectionIndex == null) {
+      return 'text';
+    }
+    if (state.sections[activeSectionIndex].contentType === 'letter') {
+      return 'text';
+    }
+    return 'numeric';
+  }, [activeSectionIndex, state.sections]);
+  const inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document);
+  const shouldShowPlaceholder = !inputHasFocus && areAllSectionsEmpty;
+  return {
+    interactions,
+    returnedValue: {
+      // Forwarded
+      readOnly,
+      onBlur: handleContainerBlur,
+      onClick: handleInputClick,
+      onFocus: handleInputFocus,
+      onPaste: handleInputPaste,
+      inputRef: handleRef,
+      // Additional
+      enableAccessibleFieldDOMStructure: false,
+      placeholder,
+      inputMode,
+      autoComplete: 'off',
+      value: shouldShowPlaceholder ? '' : valueStr,
+      onChange: handleInputChange
+    }
+  };
+};

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

@@ -0,0 +1,2 @@
+import { UseFieldTextField } from './useField.types';
+export declare const useFieldV7TextField: UseFieldTextField<true>;