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

package/internals/hooks/useField/useFieldState.js

@@ -10,25 +10,30 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _usePickerTranslations = require("../../../hooks/usePickerTranslations");
 var _useUtils = require("../useUtils");
 var _useField = require("./useField.utils");
 var _buildSectionsFromFormat = require("./buildSectionsFromFormat");
+var _validation = require("../../../validation");
 var _useControlledValue = require("../useControlledValue");
 var _getDefaultReferenceDate = require("../../utils/getDefaultReferenceDate");
-const useFieldState = params => {
+const QUERY_LIFE_DURATION_MS = 5000;
+const useFieldState = parameters => {
   const utils = (0, _useUtils.useUtils)();
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const adapter = (0, _useUtils.useLocalizationContext)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const {
-    valueManager,
-    fieldValueManager,
-    valueType,
-    validator,
-    internalProps,
-    internalProps: {
+    manager: {
+      validator,
+      valueType,
+      internal_valueManager: valueManager,
+      internal_fieldValueManager: fieldValueManager
+    },
+    internalPropsWithDefaults,
+    internalPropsWithDefaults: {
       value: valueProp,
       defaultValue,
       referenceDate: referenceDateProp,
@@ -40,8 +45,11 @@ const useFieldState = params => {
       shouldRespectLeadingZeros = false,
       timezone: timezoneProp,
       enableAccessibleFieldDOMStructure = true
+    },
+    forwardedProps: {
+      error: errorProp
     }
-  } = params;
+  } = parameters;
   const {
     value,
     handleValueChange,
@@ -59,6 +67,23 @@ const useFieldState = params => {
   React.useEffect(() => {
     valueRef.current = value;
   }, [value]);
+  const {
+    hasValidationError
+  } = (0, _validation.useValidation)({
+    props: internalPropsWithDefaults,
+    validator,
+    timezone,
+    value,
+    onError: internalPropsWithDefaults.onError
+  });
+  const error = React.useMemo(() => {
+    // only override when `error` is undefined.
+    // in case of multi input fields, the `error` value is provided externally and will always be defined.
+    if (errorProp !== undefined) {
+      return errorProp;
+    }
+    return hasValidationError;
+  }, [hasValidationError, errorProp]);
   const localizedDigits = React.useMemo(() => (0, _useField.getLocalizedDigits)(utils), [utils]);
   const sectionsValueBoundaries = React.useMemo(() => (0, _useField.getSectionsBoundaries)(utils, localizedDigits, timezone), [utils, localizedDigits, timezone]);
   const getSectionsFromValue = React.useCallback(valueToAnalyze => fieldValueManager.getSectionsFromValue(valueToAnalyze, date => (0, _buildSectionsFromFormat.buildSectionsFromFormat)({
@@ -83,14 +108,15 @@ const useFieldState = params => {
         isRtl,
         locale: utils.locale
       },
-      tempValueStrAndroid: null
+      tempValueStrAndroid: null,
+      characterQuery: null
     };
     const granularity = (0, _getDefaultReferenceDate.getSectionTypeGranularity)(sections);
     const referenceValue = valueManager.getInitialReferenceValue({
       referenceDate: referenceDateProp,
       value,
       utils,
-      props: internalProps,
+      props: internalPropsWithDefaults,
       granularity,
       timezone
     });
@@ -110,13 +136,15 @@ const useFieldState = params => {
   };
   const parsedSelectedSections = React.useMemo(() => (0, _useField.parseSelectedSections)(selectedSections, state.sections), [selectedSections, state.sections]);
   const activeSectionIndex = parsedSelectedSections === 'all' ? 0 : parsedSelectedSections;
+  const sectionOrder = React.useMemo(() => (0, _useField.getSectionOrder)(state.sections, isRtl && !enableAccessibleFieldDOMStructure), [state.sections, isRtl, enableAccessibleFieldDOMStructure]);
+  const areAllSectionsEmpty = React.useMemo(() => state.sections.every(section => section.value === ''), [state.sections]);
   const publishValue = newValue => {
     const context = {
       validationError: validator({
         adapter,
         value: newValue,
         timezone,
-        props: internalProps
+        props: internalPropsWithDefaults
       })
     };
     handleValueChange(newValue, context);
@@ -130,7 +158,7 @@ const useFieldState = params => {
     return newSections;
   };
   const sectionToUpdateOnNextInvalidDateRef = React.useRef(null);
-  const timeoutToUpdateSectionValueOnNextInvalidDate = (0, _useTimeout.default)();
+  const updateSectionValueOnNextInvalidDateTimeout = (0, _useTimeout.default)();
   const setSectionUpdateToApplyOnNextInvalidDate = newSectionValue => {
     if (activeSectionIndex == null) {
       return;
@@ -139,7 +167,7 @@ const useFieldState = params => {
       sectionIndex: activeSectionIndex,
       value: newSectionValue
     };
-    timeoutToUpdateSectionValueOnNextInvalidDate.start(0, () => {
+    updateSectionValueOnNextInvalidDateTimeout.start(0, () => {
       sectionToUpdateOnNextInvalidDateRef.current = null;
     });
   };
@@ -149,9 +177,13 @@ const useFieldState = params => {
         sections: prevState.sections.map(section => (0, _extends2.default)({}, section, {
           value: ''
         })),
-        tempValueStrAndroid: null
+        tempValueStrAndroid: null,
+        characterQuery: null
       }));
     } else {
+      setState(prevState => (0, _extends2.default)({}, prevState, {
+        characterQuery: null
+      }));
       publishValue(valueManager.emptyValue);
     }
   };
@@ -167,9 +199,13 @@ const useFieldState = params => {
     if (fieldValueManager.getDateFromSection(value, activeSection) === null) {
       setState(prevState => (0, _extends2.default)({}, prevState, {
         sections: setSectionValue(activeSectionIndex, ''),
-        tempValueStrAndroid: null
+        tempValueStrAndroid: null,
+        characterQuery: null
       }));
     } else {
+      setState(prevState => (0, _extends2.default)({}, prevState, {
+        characterQuery: null
+      }));
       publishValue(fieldValueManager.updateDateInValue(value, activeSection, null));
     }
   };
@@ -195,14 +231,14 @@ const useFieldState = params => {
     const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);
     publishValue(newValue);
   };
-  const timeoutToCleanActiveDateSectionsIfValueNull = (0, _useTimeout.default)();
+  const cleanActiveDateSectionsIfValueNullTimeout = (0, _useTimeout.default)();
   const updateSectionValue = ({
     section,
     newSectionValue,
     shouldGoToNextSection
   }) => {
-    timeoutToUpdateSectionValueOnNextInvalidDate.clear();
-    timeoutToCleanActiveDateSectionsIfValueNull.clear();
+    updateSectionValueOnNextInvalidDateTimeout.clear();
+    cleanActiveDateSectionsIfValueNullTimeout.clear();
     const activeDate = fieldValueManager.getDateFromSection(value, section);
 
     /**
@@ -227,7 +263,7 @@ const useFieldState = params => {
     if (utils.isValid(newActiveDate)) {
       const mergedDate = (0, _useField.mergeDateIntoReferenceDate)(utils, newActiveDate, newActiveDateSections, fieldValueManager.getDateFromSection(state.referenceValue, section), true);
       if (activeDate == null) {
-        timeoutToCleanActiveDateSectionsIfValueNull.start(0, () => {
+        cleanActiveDateSectionsIfValueNullTimeout.start(0, () => {
           if (valueRef.current === value) {
             setState(prevState => (0, _extends2.default)({}, prevState, {
               sections: fieldValueManager.clearDateSections(state.sections, section),
@@ -266,9 +302,14 @@ const useFieldState = params => {
       tempValueStrAndroid: null
     }));
   };
-  const setTempAndroidValueStr = tempValueStrAndroid => setState(prev => (0, _extends2.default)({}, prev, {
+  const setTempAndroidValueStr = tempValueStrAndroid => setState(prevState => (0, _extends2.default)({}, prevState, {
     tempValueStrAndroid
   }));
+  const setCharacterQuery = (0, _useEventCallback.default)(newCharacterQuery => {
+    setState(prevState => (0, _extends2.default)({}, prevState, {
+      characterQuery: newCharacterQuery
+    }));
+  });
 
   // If `prop.value` changes, we update the state to reflect the new value
   if (value !== state.lastExternalValue) {
@@ -300,29 +341,61 @@ const useFieldState = params => {
         locale: utils.locale
       },
       sections,
-      tempValueStrAndroid: null
+      tempValueStrAndroid: null,
+      characterQuery: null
     }));
   }
+  if (state.characterQuery != null && !error && activeSectionIndex == null) {
+    setCharacterQuery(null);
+  }
+  if (state.characterQuery != null && state.sections[state.characterQuery.sectionIndex]?.type !== state.characterQuery.sectionType) {
+    setCharacterQuery(null);
+  }
   React.useEffect(() => {
     if (sectionToUpdateOnNextInvalidDateRef.current != null) {
       sectionToUpdateOnNextInvalidDateRef.current = null;
     }
   });
+  const cleanCharacterQueryTimeout = (0, _useTimeout.default)();
+  React.useEffect(() => {
+    if (state.characterQuery != null) {
+      cleanCharacterQueryTimeout.start(QUERY_LIFE_DURATION_MS, () => setCharacterQuery(null));
+    }
+    return () => {};
+  }, [state.characterQuery, setCharacterQuery, cleanCharacterQueryTimeout]);
+
+  // If `tempValueStrAndroid` is still defined for some section when running `useEffect`,
+  // Then `onChange` has only been called once, which means the user pressed `Backspace` to reset the section.
+  // This causes a small flickering on Android,
+  // But we can't use `useEnhancedEffect` which is always called before the second `onChange` call and then would cause false positives.
+  React.useEffect(() => {
+    if (state.tempValueStrAndroid != null && activeSectionIndex != null) {
+      clearActiveSection();
+    }
+  }, [state.sections]); // eslint-disable-line react-hooks/exhaustive-deps
+
   return {
-    state,
-    value,
+    // States and derived states
     activeSectionIndex,
+    areAllSectionsEmpty,
+    error,
+    localizedDigits,
     parsedSelectedSections,
-    setSelectedSections,
+    sectionOrder,
+    sectionsValueBoundaries,
+    state,
+    timezone,
+    value,
+    // Methods to update the states
     clearValue,
     clearActiveSection,
+    setCharacterQuery,
+    setSelectedSections,
+    setTempAndroidValueStr,
     updateSectionValue,
     updateValueFromValueStr,
-    setTempAndroidValueStr,
-    getSectionsFromValue,
-    sectionsValueBoundaries,
-    localizedDigits,
-    timezone
+    // Utilities methods
+    getSectionsFromValue
   };
 };
 exports.useFieldState = useFieldState;

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

@@ -1,6 +1,8 @@
-import { UseFieldTextField } from "./useField.types.js";
+import { UseFieldParameters, UseFieldProps, UseFieldReturnValue } from "./useField.types.js";
 import { InferFieldSection } from "../../../models/index.js";
 import { PickerValidValue } from "../../models/index.js";
+export declare const addPositionPropertiesToSections: <TValue extends PickerValidValue>(sections: InferFieldSection<TValue>[], localizedDigits: string[], isRtl: boolean) => FieldSectionWithPositions<TValue>[];
+export declare const useFieldV6TextField: <TValue extends PickerValidValue, TError, TValidationProps extends {}, TProps extends UseFieldProps<false>>(parameters: UseFieldParameters<TValue, false, TError, TValidationProps, TProps>) => UseFieldReturnValue<false, TProps>;
 type FieldSectionWithPositions<TValue extends PickerValidValue> = InferFieldSection<TValue> & {
   /**
    * Start index of the section in the format
@@ -21,6 +23,4 @@ type FieldSectionWithPositions<TValue extends PickerValidValue> = InferFieldSect
    */
   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 {};