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

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

@@ -1,12 +1,13 @@
 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 { useValueWithTimezone } from "../useValueWithTimezone.js";
+import { useControlledValueWithTimezone } from "../useValueWithTimezone.js";
 import { getSectionTypeGranularity } from "../../utils/getDefaultReferenceDate.js";
 export const useFieldState = params => {
   const utils = useUtils();
@@ -34,10 +35,11 @@ export const useFieldState = params => {
     }
   } = params;
   const {
-    timezone,
-    value: valueFromTheOutside,
-    handleValueChange
-  } = useValueWithTimezone({
+    value,
+    handleValueChange,
+    timezone
+  } = useControlledValueWithTimezone({
+    name: 'a field component',
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
@@ -45,9 +47,13 @@ export const useFieldState = params => {
     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((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, date => buildSectionsFromFormat({
+  const getSectionsFromValue = React.useCallback(valueToAnalyze => fieldValueManager.getSectionsFromValue(valueToAnalyze, date => buildSectionsFromFormat({
     utils,
     localeText: translations,
     localizedDigits,
@@ -59,17 +65,22 @@ export const useFieldState = params => {
     isRtl
   })), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros, utils, formatDensity, enableAccessibleFieldDOMStructure]);
   const [state, setState] = React.useState(() => {
-    const sections = getSectionsFromValue(valueFromTheOutside);
+    const sections = getSectionsFromValue(value);
     validateSections(sections, valueType);
     const stateWithoutReferenceDate = {
       sections,
-      value: valueFromTheOutside,
+      lastValue: value,
+      lastSectionsDependencies: {
+        format,
+        isRtl,
+        locale: utils.locale
+      },
       tempValueStrAndroid: null
     };
     const granularity = getSectionTypeGranularity(sections);
     const referenceValue = valueManager.getInitialReferenceValue({
       referenceDate: referenceDateProp,
-      value: valueFromTheOutside,
+      value,
       utils,
       props: internalProps,
       granularity,
@@ -91,29 +102,16 @@ export const useFieldState = params => {
   };
   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 publishValue = newValue => {
     const context = {
       validationError: validator({
         adapter,
-        value,
+        value: newValue,
         timezone,
         props: internalProps
       })
     };
-    handleValueChange(value, context);
+    handleValueChange(newValue, context);
   };
   const setSectionValue = (sectionIndex, newSectionValue) => {
     const newSections = [...state.sections];
@@ -123,27 +121,49 @@ export const useFieldState = params => {
     });
     return newSections;
   };
-  const clearValue = () => {
-    publishValue({
-      value: valueManager.emptyValue,
-      referenceValue: state.referenceValue,
-      sections: getSectionsFromValue(valueManager.emptyValue)
+  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];
-    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
-    }));
+    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) => {
@@ -165,34 +185,31 @@ export const useFieldState = params => {
       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)
-    });
+    publishValue(newValue);
   };
+  const timeoutToCleanActiveDateSectionsIfValueNull = useTimeout();
   const updateSectionValue = ({
-    activeSection,
+    section,
     newSectionValue,
     shouldGoToNextSection
   }) => {
+    timeoutToUpdateSectionValueOnNextInvalidDate.clear();
+    timeoutToCleanActiveDateSectionsIfValueNull.clear();
+    const activeDate = fieldValueManager.getDateFromSection(value, section);
+
     /**
-     * 1. Decide which section should be focused
+     * 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
+     * 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 newActiveDateSections = fieldValueManager.getDateSectionsFromValue(newSections, section);
     const newActiveDate = getDateFromDateSections(utils, newActiveDateSections, localizedDigits);
-    let values;
-    let shouldPublish;
 
     /**
      * If the new date is valid,
@@ -200,23 +217,43 @@ export const useFieldState = params => {
      * 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));
+      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));
     }
 
     /**
-     * Publish or update the internal state with the new value and sections.
+     * If all the sections are filled but the date is invalid,
+     * Then we publish an invalid date.
      */
-    if (shouldPublish) {
-      return publishValue(_extends({}, values, {
-        sections: newSections
-      }));
+    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));
     }
-    return setState(prevState => _extends({}, prevState, values, {
+
+    /**
+     * 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
     }));
@@ -224,32 +261,48 @@ export const useFieldState = params => {
   const setTempAndroidValueStr = tempValueStrAndroid => setState(prev => _extends({}, prev, {
     tempValueStrAndroid
   }));
-  React.useEffect(() => {
-    const sections = getSectionsFromValue(state.value);
+
+  // If `prop.value` changes, we update the state to reflect the new value
+  if (value !== state.lastValue) {
+    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, {
+      lastValue: 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, {
-      sections
+      lastSectionsDependencies: {
+        format,
+        isRtl,
+        locale: utils.locale
+      },
+      sections,
+      tempValueStrAndroid: null
     }));
-  }, [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)
-      }));
+    if (sectionToUpdateOnNextInvalidDateRef.current != null) {
+      sectionToUpdateOnNextInvalidDateRef.current = null;
     }
-  }, [valueFromTheOutside]); // eslint-disable-line react-hooks/exhaustive-deps
-
+  });
   return {
     state,
+    value,
     activeSectionIndex,
     parsedSelectedSections,
     setSelectedSections,

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

@@ -206,7 +206,7 @@ export const useFieldV6TextField = params => {
       if (isValidPastedValue) {
         resetCharacterQuery();
         updateSectionValue({
-          activeSection,
+          section: activeSection,
           newSectionValue: pastedValue,
           shouldGoToNextSection: true
         });

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

@@ -254,7 +254,7 @@ export const useFieldV7TextField = params => {
     if (isValidPastedValue) {
       resetCharacterQuery();
       updateSectionValue({
-        activeSection,
+        section: activeSection,
         newSectionValue: pastedValue,
         shouldGoToNextSection: true
       });
@@ -292,6 +292,7 @@ export const useFieldV7TextField = params => {
         return;
       }
       resetCharacterQuery();
+      revertDOMSectionChange(sectionIndex);
       clearActiveSection();
       return;
     }

package/modern/internals/hooks/useMobilePicker/useMobilePicker.types.d.ts

@@ -2,13 +2,10 @@ import * as React from 'react';
 import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { BasePickerProps } from "../../models/props/basePickerProps.js";
 import { PickersModalDialogSlots, PickersModalDialogSlotProps } from "../../components/PickersModalDialog.js";
-import { UsePickerParams } from "../usePicker/index.js";
+import { UsePickerParameters, UsePickerNonStaticProps, UsePickerProps } from "../usePicker/index.js";
 import { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.js";
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.js";
-import { UsePickerValueNonStaticProps } from "../usePicker/usePickerValue.types.js";
-import { UsePickerViewsProps } from "../usePicker/usePickerViews.js";
 import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.js";
-import { UsePickerProviderNonStaticProps } from "../usePicker/usePickerProvider.js";
 import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.js";
 export interface UseMobilePickerSlots extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
   /**
@@ -20,8 +17,8 @@ export interface ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStruc
   field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
 }
 export interface UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
-export interface MobileOnlyPickerProps extends UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps {}
-export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, TView, any>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps>, MakeRequired<MobileOnlyPickerProps, 'format'> {
+export interface MobileOnlyPickerProps extends UsePickerNonStaticProps {}
+export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerProps<PickerValue, TView, TError, any>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps>, MakeRequired<MobileOnlyPickerProps, 'format'> {
   /**
    * Overridable component slots.
    * @default {}
@@ -33,6 +30,6 @@ export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem,
    */
   slotProps?: UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
-export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
+export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
   props: TExternalProps;
 }

package/modern/internals/hooks/useNullableFieldPrivateContext.d.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import type { UseFieldInternalProps } from './useField';
-import { UsePickerViewsFieldPrivateContextValue } from "./usePicker/usePickerViews.js";
+import { FieldRef } from "../../models/index.js";
+import { PickerRangeValue, PickerValue } from "../models/index.js";
 export declare const PickerFieldPrivateContext: React.Context<PickerFieldPrivateContextValue | null>;
 export declare function useNullableFieldPrivateContext(): PickerFieldPrivateContextValue | null;
-export interface PickerFieldPrivateContextValue extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'>, UsePickerViewsFieldPrivateContextValue {}
+export interface PickerFieldPrivateContextValue extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
+  fieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
+}

package/modern/internals/hooks/usePicker/hooks/useOrientation.d.ts

@@ -0,0 +1,2 @@
+import { DateOrTimeViewWithMeridiem, PickerOrientation } from "../../../models/index.js";
+export declare function useOrientation(views: readonly DateOrTimeViewWithMeridiem[], customOrientation: PickerOrientation | undefined): PickerOrientation;

package/modern/internals/hooks/usePicker/hooks/useOrientation.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { arrayIncludes } from "../../../utils/utils.js";
+function getOrientation() {
+  if (typeof window === 'undefined') {
+    return 'portrait';
+  }
+  if (window.screen && window.screen.orientation && window.screen.orientation.angle) {
+    return Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';
+  }
+
+  // Support IOS safari
+  if (window.orientation) {
+    return Math.abs(Number(window.orientation)) === 90 ? 'landscape' : 'portrait';
+  }
+  return 'portrait';
+}
+export function useOrientation(views, customOrientation) {
+  const [orientation, setOrientation] = React.useState(getOrientation);
+  useEnhancedEffect(() => {
+    const eventHandler = () => {
+      setOrientation(getOrientation());
+    };
+    window.addEventListener('orientationchange', eventHandler);
+    return () => {
+      window.removeEventListener('orientationchange', eventHandler);
+    };
+  }, []);
+  if (arrayIncludes(views, ['hours', 'minutes', 'seconds'])) {
+    // could not display 13:34:44 in landscape mode
+    return 'portrait';
+  }
+  return customOrientation ?? orientation;
+}

package/modern/internals/hooks/usePicker/hooks/useValueAndOpenStates.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { DateOrTimeViewWithMeridiem, PickerValidValue, PickerValueManager } from "../../../models/index.js";
+import { PickerSelectionState, UsePickerProps, UsePickerState } from "../usePicker.types.js";
+import { InferError } from "../../../../models/index.js";
+import { SetValueActionOptions } from "../../../components/PickerProvider.js";
+import { Validator } from "../../../../validation/index.js";
+export declare function useValueAndOpenStates<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>>(parameters: UsePickerDateStateParameters<TValue, TView, TExternalProps>): {
+  timezone: string;
+  state: UsePickerState<TValue>;
+  setValue: (newValue: TValue, options?: SetValueActionOptions<InferError<TExternalProps>>) => void;
+  setValueFromView: (newValue: TValue, selectionState?: PickerSelectionState) => void;
+  setOpen: (action: React.SetStateAction<boolean>) => void;
+};
+interface UsePickerDateStateParameters<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>> {
+  props: TExternalProps;
+  valueManager: PickerValueManager<TValue, InferError<TExternalProps>>;
+  validator: Validator<TValue, InferError<TExternalProps>, TExternalProps>;
+}
+export {};