@mui/x-date-pickers 8.0.0-alpha.8 → 8.0.0-beta.0

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 section = 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({
+      section,
+      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,34 @@
+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.
+   */
+  section: 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>;
+  value: 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,319 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useControlled from '@mui/utils/useControlled';
+import useTimeout from '@mui/utils/useTimeout';
+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 { useControlledValue } from "../useControlledValue.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 {
+    value,
+    handleValueChange,
+    timezone
+  } = useControlledValue({
+    name: 'a field component',
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    referenceDate: referenceDateProp,
+    onChange,
+    valueManager
+  });
+  const valueRef = React.useRef(value);
+  React.useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+  const localizedDigits = React.useMemo(() => getLocalizedDigits(utils), [utils]);
+  const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils, localizedDigits, timezone), [utils, localizedDigits, timezone]);
+  const getSectionsFromValue = React.useCallback(valueToAnalyze => fieldValueManager.getSectionsFromValue(valueToAnalyze, 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(value);
+    validateSections(sections, valueType);
+    const stateWithoutReferenceDate = {
+      sections,
+      lastExternalValue: value,
+      lastSectionsDependencies: {
+        format,
+        isRtl,
+        locale: utils.locale
+      },
+      tempValueStrAndroid: null
+    };
+    const granularity = getSectionTypeGranularity(sections);
+    const referenceValue = valueManager.getInitialReferenceValue({
+      referenceDate: referenceDateProp,
+      value,
+      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 = newValue => {
+    const context = {
+      validationError: validator({
+        adapter,
+        value: newValue,
+        timezone,
+        props: internalProps
+      })
+    };
+    handleValueChange(newValue, context);
+  };
+  const setSectionValue = (sectionIndex, newSectionValue) => {
+    const newSections = [...state.sections];
+    newSections[sectionIndex] = _extends({}, newSections[sectionIndex], {
+      value: newSectionValue,
+      modified: true
+    });
+    return newSections;
+  };
+  const sectionToUpdateOnNextInvalidDateRef = React.useRef(null);
+  const timeoutToUpdateSectionValueOnNextInvalidDate = useTimeout();
+  const setSectionUpdateToApplyOnNextInvalidDate = newSectionValue => {
+    if (activeSectionIndex == null) {
+      return;
+    }
+    sectionToUpdateOnNextInvalidDateRef.current = {
+      sectionIndex: activeSectionIndex,
+      value: newSectionValue
+    };
+    timeoutToUpdateSectionValueOnNextInvalidDate.start(0, () => {
+      sectionToUpdateOnNextInvalidDateRef.current = null;
+    });
+  };
+  const clearValue = () => {
+    if (valueManager.areValuesEqual(utils, value, valueManager.emptyValue)) {
+      setState(prevState => _extends({}, prevState, {
+        sections: prevState.sections.map(section => _extends({}, section, {
+          value: ''
+        })),
+        tempValueStrAndroid: null
+      }));
+    } else {
+      publishValue(valueManager.emptyValue);
+    }
+  };
+  const clearActiveSection = () => {
+    if (activeSectionIndex == null) {
+      return;
+    }
+    const activeSection = state.sections[activeSectionIndex];
+    if (activeSection.value === '') {
+      return;
+    }
+    setSectionUpdateToApplyOnNextInvalidDate('');
+    if (fieldValueManager.getDateFromSection(value, activeSection) === null) {
+      setState(prevState => _extends({}, prevState, {
+        sections: setSectionValue(activeSectionIndex, ''),
+        tempValueStrAndroid: null
+      }));
+    } else {
+      publishValue(fieldValueManager.updateDateInValue(value, activeSection, null));
+    }
+  };
+  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);
+    publishValue(newValue);
+  };
+  const timeoutToCleanActiveDateSectionsIfValueNull = useTimeout();
+  const updateSectionValue = ({
+    section,
+    newSectionValue,
+    shouldGoToNextSection
+  }) => {
+    timeoutToUpdateSectionValueOnNextInvalidDate.clear();
+    timeoutToCleanActiveDateSectionsIfValueNull.clear();
+    const activeDate = fieldValueManager.getDateFromSection(value, section);
+
+    /**
+     * Decide which section should be focused
+     */
+    if (shouldGoToNextSection && activeSectionIndex < state.sections.length - 1) {
+      setSelectedSections(activeSectionIndex + 1);
+    }
+
+    /**
+     * Try to build a valid date from the new section value
+     */
+    const newSections = setSectionValue(activeSectionIndex, newSectionValue);
+    const newActiveDateSections = fieldValueManager.getDateSectionsFromValue(newSections, section);
+    const newActiveDate = getDateFromDateSections(utils, newActiveDateSections, localizedDigits);
+
+    /**
+     * 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, fieldValueManager.getDateFromSection(state.referenceValue, section), true);
+      if (activeDate == null) {
+        timeoutToCleanActiveDateSectionsIfValueNull.start(0, () => {
+          if (valueRef.current === value) {
+            setState(prevState => _extends({}, prevState, {
+              sections: fieldValueManager.clearDateSections(state.sections, section),
+              tempValueStrAndroid: null
+            }));
+          }
+        });
+      }
+      return publishValue(fieldValueManager.updateDateInValue(value, section, mergedDate));
+    }
+
+    /**
+     * If all the sections are filled but the date is invalid,
+     * Then we publish an invalid date.
+     */
+    if (newActiveDateSections.every(sectionBis => sectionBis.value !== '')) {
+      setSectionUpdateToApplyOnNextInvalidDate(newSectionValue);
+      return publishValue(fieldValueManager.updateDateInValue(value, section, newActiveDate));
+    }
+
+    /**
+     * If the previous date is not null,
+     * Then we publish the date as `null`.
+     */
+    if (activeDate != null) {
+      setSectionUpdateToApplyOnNextInvalidDate(newSectionValue);
+      return publishValue(fieldValueManager.updateDateInValue(value, section, null));
+    }
+
+    /**
+     * If the previous date is already null,
+     * Then we don't publish the date and we update the sections.
+     */
+    return setState(prevState => _extends({}, prevState, {
+      sections: newSections,
+      tempValueStrAndroid: null
+    }));
+  };
+  const setTempAndroidValueStr = tempValueStrAndroid => setState(prev => _extends({}, prev, {
+    tempValueStrAndroid
+  }));
+
+  // If `prop.value` changes, we update the state to reflect the new value
+  if (value !== state.lastExternalValue) {
+    let sections;
+    if (sectionToUpdateOnNextInvalidDateRef.current != null && !utils.isValid(fieldValueManager.getDateFromSection(value, state.sections[sectionToUpdateOnNextInvalidDateRef.current.sectionIndex]))) {
+      sections = setSectionValue(sectionToUpdateOnNextInvalidDateRef.current.sectionIndex, sectionToUpdateOnNextInvalidDateRef.current.value);
+    } else {
+      sections = getSectionsFromValue(value);
+    }
+    setState(prevState => _extends({}, prevState, {
+      lastExternalValue: value,
+      sections,
+      sectionsDependencies: {
+        format,
+        isRtl,
+        locale: utils.locale
+      },
+      referenceValue: fieldValueManager.updateReferenceValue(utils, value, prevState.referenceValue),
+      tempValueStrAndroid: null
+    }));
+  }
+  if (isRtl !== state.lastSectionsDependencies.isRtl || format !== state.lastSectionsDependencies.format || utils.locale !== state.lastSectionsDependencies.locale) {
+    const sections = getSectionsFromValue(value);
+    validateSections(sections, valueType);
+    setState(prevState => _extends({}, prevState, {
+      lastSectionsDependencies: {
+        format,
+        isRtl,
+        locale: utils.locale
+      },
+      sections,
+      tempValueStrAndroid: null
+    }));
+  }
+  React.useEffect(() => {
+    if (sectionToUpdateOnNextInvalidDateRef.current != null) {
+      sectionToUpdateOnNextInvalidDateRef.current = null;
+    }
+  });
+  return {
+    state,
+    value,
+    activeSectionIndex,
+    parsedSelectedSections,
+    setSelectedSections,
+    clearValue,
+    clearActiveSection,
+    updateSectionValue,
+    updateValueFromValueStr,
+    setTempAndroidValueStr,
+    getSectionsFromValue,
+    sectionsValueBoundaries,
+    localizedDigits,
+    timezone
+  };
+};