@mui/x-date-pickers 8.0.0-alpha.11 → 8.0.0-alpha.13

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

@@ -0,0 +1,258 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { useUtils } from "../useUtils.js";
+import { changeSectionValueFormat, cleanDigitSectionValue, doesSectionFormatHaveLeadingZeros, getDateSectionConfigFromFormatToken, getDaysInWeekStr, getLetterEditingOptions, applyLocalizedDigits, removeLocalizedDigits, isStringNumber } from "./useField.utils.js";
+
+/**
+ * The letter editing and the numeric editing each define a `CharacterEditingApplier`.
+ * This function decides what the new section value should be and if the focus should switch to the next section.
+ *
+ * If it returns `null`, then the section value is not updated and the focus does not move.
+ */
+
+/**
+ * Function called by `applyQuery` which decides:
+ * - what is the new section value ?
+ * - should the query used to get this value be stored for the next key press ?
+ *
+ * If it returns `{ sectionValue: string; shouldGoToNextSection: boolean }`,
+ * Then we store the query and update the section with the new value.
+ *
+ * If it returns `{ saveQuery: true` },
+ * Then we store the query and don't update the section.
+ *
+ * If it returns `{ saveQuery: false },
+ * Then we do nothing.
+ */
+
+const QUERY_LIFE_DURATION_MS = 5000;
+const isQueryResponseWithoutValue = response => response.saveQuery != null;
+
+/**
+ * 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
+ *
+ * 1. The numeric editing when the user presses a digit
+ * 2. The letter editing when the user presses another key
+ */
+export const useFieldCharacterEditing = ({
+  sections,
+  updateSectionValue,
+  sectionsValueBoundaries,
+  localizedDigits,
+  setTempAndroidValueStr,
+  timezone
+}) => {
+  const utils = useUtils();
+  const [query, setQuery] = React.useState(null);
+  const resetQuery = useEventCallback(() => setQuery(null));
+  React.useEffect(() => {
+    if (query != null && sections[query.sectionIndex]?.type !== query.sectionType) {
+      resetQuery();
+    }
+  }, [sections, query, resetQuery]);
+  React.useEffect(() => {
+    if (query != null) {
+      const timeout = setTimeout(() => resetQuery(), QUERY_LIFE_DURATION_MS);
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+    return () => {};
+  }, [query, resetQuery]);
+  const applyQuery = ({
+    keyPressed,
+    sectionIndex
+  }, getFirstSectionValueMatchingWithQuery, isValidQueryValue) => {
+    const cleanKeyPressed = keyPressed.toLowerCase();
+    const activeSection = sections[sectionIndex];
+
+    // The current query targets the section being editing
+    // We can try to concatenate the value
+    if (query != null && (!isValidQueryValue || isValidQueryValue(query.value)) && query.sectionIndex === sectionIndex) {
+      const concatenatedQueryValue = `${query.value}${cleanKeyPressed}`;
+      const queryResponse = getFirstSectionValueMatchingWithQuery(concatenatedQueryValue, activeSection);
+      if (!isQueryResponseWithoutValue(queryResponse)) {
+        setQuery({
+          sectionIndex,
+          value: concatenatedQueryValue,
+          sectionType: activeSection.type
+        });
+        return queryResponse;
+      }
+    }
+    const queryResponse = getFirstSectionValueMatchingWithQuery(cleanKeyPressed, activeSection);
+    if (isQueryResponseWithoutValue(queryResponse) && !queryResponse.saveQuery) {
+      resetQuery();
+      return null;
+    }
+    setQuery({
+      sectionIndex,
+      value: cleanKeyPressed,
+      sectionType: activeSection.type
+    });
+    if (isQueryResponseWithoutValue(queryResponse)) {
+      return null;
+    }
+    return queryResponse;
+  };
+  const applyLetterEditing = params => {
+    const findMatchingOptions = (format, options, queryValue) => {
+      const matchingValues = options.filter(option => option.toLowerCase().startsWith(queryValue));
+      if (matchingValues.length === 0) {
+        return {
+          saveQuery: false
+        };
+      }
+      return {
+        sectionValue: matchingValues[0],
+        shouldGoToNextSection: matchingValues.length === 1
+      };
+    };
+    const testQueryOnFormatAndFallbackFormat = (queryValue, activeSection, fallbackFormat, formatFallbackValue) => {
+      const getOptions = format => getLetterEditingOptions(utils, timezone, activeSection.type, format);
+      if (activeSection.contentType === 'letter') {
+        return findMatchingOptions(activeSection.format, getOptions(activeSection.format), queryValue);
+      }
+
+      // When editing a digit-format month / weekDay and the user presses a letter,
+      // We can support the letter editing by using the letter-format month / weekDay and re-formatting the result.
+      // We just have to make sure that the default month / weekDay format is a letter format,
+      if (fallbackFormat && formatFallbackValue != null && getDateSectionConfigFromFormatToken(utils, fallbackFormat).contentType === 'letter') {
+        const fallbackOptions = getOptions(fallbackFormat);
+        const response = findMatchingOptions(fallbackFormat, fallbackOptions, queryValue);
+        if (isQueryResponseWithoutValue(response)) {
+          return {
+            saveQuery: false
+          };
+        }
+        return _extends({}, response, {
+          sectionValue: formatFallbackValue(response.sectionValue, fallbackOptions)
+        });
+      }
+      return {
+        saveQuery: false
+      };
+    };
+    const getFirstSectionValueMatchingWithQuery = (queryValue, activeSection) => {
+      switch (activeSection.type) {
+        case 'month':
+          {
+            const formatFallbackValue = fallbackValue => changeSectionValueFormat(utils, fallbackValue, utils.formats.month, activeSection.format);
+            return testQueryOnFormatAndFallbackFormat(queryValue, activeSection, utils.formats.month, formatFallbackValue);
+          }
+        case 'weekDay':
+          {
+            const formatFallbackValue = (fallbackValue, fallbackOptions) => fallbackOptions.indexOf(fallbackValue).toString();
+            return testQueryOnFormatAndFallbackFormat(queryValue, activeSection, utils.formats.weekday, formatFallbackValue);
+          }
+        case 'meridiem':
+          {
+            return testQueryOnFormatAndFallbackFormat(queryValue, activeSection);
+          }
+        default:
+          {
+            return {
+              saveQuery: false
+            };
+          }
+      }
+    };
+    return applyQuery(params, getFirstSectionValueMatchingWithQuery);
+  };
+  const applyNumericEditing = params => {
+    const getNewSectionValue = (queryValue, section) => {
+      const cleanQueryValue = removeLocalizedDigits(queryValue, localizedDigits);
+      const queryValueNumber = Number(cleanQueryValue);
+      const sectionBoundaries = sectionsValueBoundaries[section.type]({
+        currentDate: null,
+        format: section.format,
+        contentType: section.contentType
+      });
+      if (queryValueNumber > sectionBoundaries.maximum) {
+        return {
+          saveQuery: false
+        };
+      }
+
+      // If the user types `0` on a month section,
+      // It is below the minimum, but we want to store the `0` in the query,
+      // So that when he pressed `1`, it will store `01` and move to the next section.
+      if (queryValueNumber < sectionBoundaries.minimum) {
+        return {
+          saveQuery: true
+        };
+      }
+      const shouldGoToNextSection = queryValueNumber * 10 > sectionBoundaries.maximum || cleanQueryValue.length === sectionBoundaries.maximum.toString().length;
+      const newSectionValue = cleanDigitSectionValue(utils, queryValueNumber, sectionBoundaries, localizedDigits, section);
+      return {
+        sectionValue: newSectionValue,
+        shouldGoToNextSection
+      };
+    };
+    const getFirstSectionValueMatchingWithQuery = (queryValue, activeSection) => {
+      if (activeSection.contentType === 'digit' || activeSection.contentType === 'digit-with-letter') {
+        return getNewSectionValue(queryValue, activeSection);
+      }
+
+      // When editing a letter-format month and the user presses a digit,
+      // We can support the numeric editing by using the digit-format month and re-formatting the result.
+      if (activeSection.type === 'month') {
+        const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, 'digit', 'month', 'MM');
+        const response = getNewSectionValue(queryValue, {
+          type: activeSection.type,
+          format: 'MM',
+          hasLeadingZerosInFormat,
+          hasLeadingZerosInInput: true,
+          contentType: 'digit',
+          maxLength: 2
+        });
+        if (isQueryResponseWithoutValue(response)) {
+          return response;
+        }
+        const formattedValue = changeSectionValueFormat(utils, response.sectionValue, 'MM', activeSection.format);
+        return _extends({}, response, {
+          sectionValue: formattedValue
+        });
+      }
+
+      // When editing a letter-format weekDay and the user presses a digit,
+      // We can support the numeric editing by returning the nth day in the week day array.
+      if (activeSection.type === 'weekDay') {
+        const response = getNewSectionValue(queryValue, activeSection);
+        if (isQueryResponseWithoutValue(response)) {
+          return response;
+        }
+        const formattedValue = getDaysInWeekStr(utils, activeSection.format)[Number(response.sectionValue) - 1];
+        return _extends({}, response, {
+          sectionValue: formattedValue
+        });
+      }
+      return {
+        saveQuery: false
+      };
+    };
+    return applyQuery(params, getFirstSectionValueMatchingWithQuery, queryValue => isStringNumber(queryValue, localizedDigits));
+  };
+  const applyCharacterEditing = useEventCallback(params => {
+    const activeSection = sections[params.sectionIndex];
+    const isNumericEditing = isStringNumber(params.keyPressed, localizedDigits);
+    const response = isNumericEditing ? applyNumericEditing(_extends({}, params, {
+      keyPressed: applyLocalizedDigits(params.keyPressed, localizedDigits)
+    })) : applyLetterEditing(params);
+    if (response == null) {
+      setTempAndroidValueStr(null);
+      return;
+    }
+    updateSectionValue({
+      activeSection,
+      newSectionValue: response.sectionValue,
+      shouldGoToNextSection: response.shouldGoToNextSection
+    });
+  });
+  return {
+    applyCharacterEditing,
+    resetCharacterQuery: resetQuery
+  };
+};

package/esm/internals/hooks/useField/useFieldInternalPropsWithDefaults.d.ts

@@ -0,0 +1,17 @@
+import { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults } from "../../models/index.js";
+/**
+ * Applies the default values to the field internal props.
+ * This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults.
+ * It is only here to allow the migration to be done in smaller steps.
+ */
+export declare function useFieldInternalPropsWithDefaults<TManager extends PickerAnyManager>(parameters: UseFieldInternalPropsWithDefaultsParameters<TManager>): PickerManagerFieldInternalPropsWithDefaults<TManager>;
+interface UseFieldInternalPropsWithDefaultsParameters<TManager extends PickerAnyManager> {
+  manager: TManager;
+  internalProps: PickerManagerFieldInternalProps<TManager>;
+  /**
+   * Hack to make sure that on multi input range field, the `useNullableFieldPrivateContext().fieldRef` is only bound to the field matching the range position.
+   * @default false
+   */
+  skipContextFieldRefAssignment?: boolean;
+}
+export {};

package/esm/internals/hooks/useField/useFieldInternalPropsWithDefaults.js

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
+import { useLocalizationContext } from "../useUtils.js";
+import { useNullablePickerContext } from "../useNullablePickerContext.js";
+import { useNullableFieldPrivateContext } from "../useNullableFieldPrivateContext.js";
+
+/**
+ * Applies the default values to the field internal props.
+ * This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults.
+ * It is only here to allow the migration to be done in smaller steps.
+ */
+export function useFieldInternalPropsWithDefaults(parameters) {
+  const {
+    manager,
+    internalProps,
+    skipContextFieldRefAssignment
+  } = parameters;
+  const localizationContext = useLocalizationContext();
+  const pickerContext = useNullablePickerContext();
+  const fieldPrivateContext = useNullableFieldPrivateContext();
+  const handleFieldRef = useForkRef(internalProps.unstableFieldRef, skipContextFieldRefAssignment ? null : fieldPrivateContext?.fieldRef);
+  const setValue = pickerContext?.setValue;
+  const handleChangeFromPicker = React.useCallback((newValue, ctx) => {
+    return setValue?.(newValue, {
+      validationError: ctx.validationError,
+      shouldClose: false
+    });
+  }, [setValue]);
+  return React.useMemo(() => {
+    let internalPropsWithDefaultsFromContext = internalProps;
+    // If one of the context is null,
+    // Then the field is used as a standalone component and the other context will be null as well.
+    if (fieldPrivateContext != null && pickerContext != null) {
+      internalPropsWithDefaultsFromContext = _extends({
+        value: pickerContext.value,
+        onChange: handleChangeFromPicker,
+        timezone: pickerContext.timezone,
+        disabled: pickerContext.disabled,
+        readOnly: pickerContext.readOnly,
+        autoFocus: pickerContext.autoFocus && !pickerContext.open,
+        focused: pickerContext.open ? true : undefined,
+        format: pickerContext.fieldFormat,
+        formatDensity: fieldPrivateContext.formatDensity,
+        enableAccessibleFieldDOMStructure: fieldPrivateContext.enableAccessibleFieldDOMStructure,
+        selectedSections: fieldPrivateContext.selectedSections,
+        onSelectedSectionsChange: fieldPrivateContext.onSelectedSectionsChange,
+        unstableFieldRef: handleFieldRef
+      }, internalProps);
+    }
+    return manager.internal_applyDefaultsToFieldInternalProps(_extends({}, localizationContext, {
+      internalProps: internalPropsWithDefaultsFromContext
+    }));
+  }, [manager, localizationContext, pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker, handleFieldRef]);
+}

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

@@ -0,0 +1,33 @@
+import { UseFieldInternalProps, UseFieldParams, UseFieldState, FieldParsedSelectedSections, FieldSectionsValueBoundaries, UseFieldForwardedProps } from "./useField.types.js";
+import { FieldSelectedSections, PickersTimezone, InferFieldSection } from "../../../models/index.js";
+import { PickerValidValue } from "../../models/index.js";
+export interface UpdateSectionValueParams<TValue extends PickerValidValue> {
+  /**
+   * The section on which we want to apply the new value.
+   */
+  activeSection: InferFieldSection<TValue>;
+  /**
+   * Value to apply to the active section.
+   */
+  newSectionValue: string;
+  /**
+   * If `true`, the focus will move to the next section.
+   */
+  shouldGoToNextSection: boolean;
+}
+export interface UseFieldStateResponse<TValue extends PickerValidValue> {
+  state: UseFieldState<TValue>;
+  activeSectionIndex: number | null;
+  parsedSelectedSections: FieldParsedSelectedSections;
+  setSelectedSections: (sections: FieldSelectedSections) => void;
+  clearValue: () => void;
+  clearActiveSection: () => void;
+  updateSectionValue: (params: UpdateSectionValueParams<TValue>) => void;
+  updateValueFromValueStr: (valueStr: string) => void;
+  setTempAndroidValueStr: (tempAndroidValueStr: string | null) => void;
+  sectionsValueBoundaries: FieldSectionsValueBoundaries;
+  getSectionsFromValue: (value: TValue, fallbackSections?: InferFieldSection<TValue>[] | null) => InferFieldSection<TValue>[];
+  localizedDigits: string[];
+  timezone: PickersTimezone;
+}
+export declare const useFieldState: <TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, any>>(params: UseFieldParams<TValue, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => UseFieldStateResponse<TValue>;

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

@@ -0,0 +1,266 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useControlled from '@mui/utils/useControlled';
+import { useRtl } from '@mui/system/RtlProvider';
+import { usePickerTranslations } from "../../../hooks/usePickerTranslations.js";
+import { useUtils, useLocalizationContext } from "../useUtils.js";
+import { mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections, parseSelectedSections, getLocalizedDigits } from "./useField.utils.js";
+import { buildSectionsFromFormat } from "./buildSectionsFromFormat.js";
+import { useValueWithTimezone } from "../useValueWithTimezone.js";
+import { getSectionTypeGranularity } from "../../utils/getDefaultReferenceDate.js";
+export const useFieldState = params => {
+  const utils = useUtils();
+  const translations = usePickerTranslations();
+  const adapter = useLocalizationContext();
+  const isRtl = useRtl();
+  const {
+    valueManager,
+    fieldValueManager,
+    valueType,
+    validator,
+    internalProps,
+    internalProps: {
+      value: valueProp,
+      defaultValue,
+      referenceDate: referenceDateProp,
+      onChange,
+      format,
+      formatDensity = 'dense',
+      selectedSections: selectedSectionsProp,
+      onSelectedSectionsChange,
+      shouldRespectLeadingZeros = false,
+      timezone: timezoneProp,
+      enableAccessibleFieldDOMStructure = true
+    }
+  } = params;
+  const {
+    timezone,
+    value: valueFromTheOutside,
+    handleValueChange
+  } = useValueWithTimezone({
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    referenceDate: referenceDateProp,
+    onChange,
+    valueManager
+  });
+  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, date => buildSectionsFromFormat({
+    utils,
+    localeText: translations,
+    localizedDigits,
+    format,
+    date,
+    formatDensity,
+    shouldRespectLeadingZeros,
+    enableAccessibleFieldDOMStructure,
+    isRtl
+  })), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros, utils, formatDensity, enableAccessibleFieldDOMStructure]);
+  const [state, setState] = React.useState(() => {
+    const sections = getSectionsFromValue(valueFromTheOutside);
+    validateSections(sections, valueType);
+    const stateWithoutReferenceDate = {
+      sections,
+      value: valueFromTheOutside,
+      tempValueStrAndroid: null
+    };
+    const granularity = getSectionTypeGranularity(sections);
+    const referenceValue = valueManager.getInitialReferenceValue({
+      referenceDate: referenceDateProp,
+      value: valueFromTheOutside,
+      utils,
+      props: internalProps,
+      granularity,
+      timezone
+    });
+    return _extends({}, stateWithoutReferenceDate, {
+      referenceValue
+    });
+  });
+  const [selectedSections, innerSetSelectedSections] = useControlled({
+    controlled: selectedSectionsProp,
+    default: null,
+    name: 'useField',
+    state: 'selectedSections'
+  });
+  const setSelectedSections = newSelectedSections => {
+    innerSetSelectedSections(newSelectedSections);
+    onSelectedSectionsChange?.(newSelectedSections);
+  };
+  const parsedSelectedSections = React.useMemo(() => parseSelectedSections(selectedSections, state.sections), [selectedSections, state.sections]);
+  const activeSectionIndex = parsedSelectedSections === 'all' ? 0 : parsedSelectedSections;
+  const publishValue = ({
+    value,
+    referenceValue,
+    sections
+  }) => {
+    setState(prevState => _extends({}, prevState, {
+      sections,
+      value,
+      referenceValue,
+      tempValueStrAndroid: null
+    }));
+    if (valueManager.areValuesEqual(utils, state.value, value)) {
+      return;
+    }
+    const context = {
+      validationError: validator({
+        adapter,
+        value,
+        timezone,
+        props: internalProps
+      })
+    };
+    handleValueChange(value, context);
+  };
+  const setSectionValue = (sectionIndex, newSectionValue) => {
+    const newSections = [...state.sections];
+    newSections[sectionIndex] = _extends({}, newSections[sectionIndex], {
+      value: newSectionValue,
+      modified: true
+    });
+    return newSections;
+  };
+  const clearValue = () => {
+    publishValue({
+      value: valueManager.emptyValue,
+      referenceValue: state.referenceValue,
+      sections: getSectionsFromValue(valueManager.emptyValue)
+    });
+  };
+  const clearActiveSection = () => {
+    if (activeSectionIndex == null) {
+      return;
+    }
+    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(activeSectionIndex, '');
+    const newActiveDate = hasNoOtherNonEmptySections ? null : utils.getInvalidDate();
+    const newValues = activeDateManager.getNewValuesFromNewActiveDate(newActiveDate);
+    publishValue(_extends({}, newValues, {
+      sections: newSections
+    }));
+  };
+  const updateValueFromValueStr = valueStr => {
+    const parseDateStr = (dateStr, referenceDate) => {
+      const date = utils.parse(dateStr, format);
+      if (!utils.isValid(date)) {
+        return null;
+      }
+      const sections = buildSectionsFromFormat({
+        utils,
+        localeText: translations,
+        localizedDigits,
+        format,
+        date,
+        formatDensity,
+        shouldRespectLeadingZeros,
+        enableAccessibleFieldDOMStructure,
+        isRtl
+      });
+      return mergeDateIntoReferenceDate(utils, date, sections, referenceDate, false);
+    };
+    const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);
+    const newReferenceValue = fieldValueManager.updateReferenceValue(utils, newValue, state.referenceValue);
+    publishValue({
+      value: newValue,
+      referenceValue: newReferenceValue,
+      sections: getSectionsFromValue(newValue, state.sections)
+    });
+  };
+  const updateSectionValue = ({
+    activeSection,
+    newSectionValue,
+    shouldGoToNextSection
+  }) => {
+    /**
+     * 1. Decide which section should be focused
+     */
+    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(activeSectionIndex, newSectionValue);
+    const newActiveDateSections = activeDateManager.getSections(newSections);
+    const newActiveDate = getDateFromDateSections(utils, newActiveDateSections, localizedDigits);
+    let values;
+    let shouldPublish;
+
+    /**
+     * If the new date is valid,
+     * Then we merge the value of the modified sections into the reference date.
+     * This makes sure that we don't lose some information of the initial date (like the time on a date field).
+     */
+    if (utils.isValid(newActiveDate)) {
+      const mergedDate = mergeDateIntoReferenceDate(utils, newActiveDate, newActiveDateSections, activeDateManager.referenceDate, true);
+      values = activeDateManager.getNewValuesFromNewActiveDate(mergedDate);
+      shouldPublish = true;
+    } else {
+      values = activeDateManager.getNewValuesFromNewActiveDate(newActiveDate);
+      shouldPublish = (newActiveDate != null && !utils.isValid(newActiveDate)) !== (activeDateManager.date != null && !utils.isValid(activeDateManager.date));
+    }
+
+    /**
+     * Publish or update the internal state with the new value and sections.
+     */
+    if (shouldPublish) {
+      return publishValue(_extends({}, values, {
+        sections: newSections
+      }));
+    }
+    return setState(prevState => _extends({}, prevState, values, {
+      sections: newSections,
+      tempValueStrAndroid: null
+    }));
+  };
+  const setTempAndroidValueStr = tempValueStrAndroid => setState(prev => _extends({}, prev, {
+    tempValueStrAndroid
+  }));
+  React.useEffect(() => {
+    const sections = getSectionsFromValue(state.value);
+    validateSections(sections, valueType);
+    setState(prevState => _extends({}, prevState, {
+      sections
+    }));
+  }, [format, utils.locale, isRtl]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  React.useEffect(() => {
+    let shouldUpdate;
+    if (!valueManager.areValuesEqual(utils, state.value, valueFromTheOutside)) {
+      shouldUpdate = true;
+    } else {
+      shouldUpdate = valueManager.getTimezone(utils, state.value) !== valueManager.getTimezone(utils, valueFromTheOutside);
+    }
+    if (shouldUpdate) {
+      setState(prevState => _extends({}, prevState, {
+        value: valueFromTheOutside,
+        referenceValue: fieldValueManager.updateReferenceValue(utils, valueFromTheOutside, prevState.referenceValue),
+        sections: getSectionsFromValue(valueFromTheOutside)
+      }));
+    }
+  }, [valueFromTheOutside]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return {
+    state,
+    activeSectionIndex,
+    parsedSelectedSections,
+    setSelectedSections,
+    clearValue,
+    clearActiveSection,
+    updateSectionValue,
+    updateValueFromValueStr,
+    setTempAndroidValueStr,
+    getSectionsFromValue,
+    sectionsValueBoundaries,
+    localizedDigits,
+    timezone
+  };
+};

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

@@ -0,0 +1,26 @@
+import { UseFieldTextField } from "./useField.types.js";
+import { InferFieldSection } from "../../../models/index.js";
+import { PickerValidValue } from "../../models/index.js";
+type FieldSectionWithPositions<TValue extends PickerValidValue> = InferFieldSection<TValue> & {
+  /**
+   * 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: <TValue extends PickerValidValue>(sections: InferFieldSection<TValue>[], localizedDigits: string[], isRtl: boolean) => FieldSectionWithPositions<TValue>[];
+export declare const useFieldV6TextField: UseFieldTextField<false>;
+export {};