@mui/x-date-pickers 6.0.2 → 6.0.3

package/internals/hooks/useField/useField.js

@@ -5,9 +5,10 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
+import { useTheme } from '@mui/material/styles';
 import { useValidation } from '../validation/useValidation';
 import { useUtils } from '../useUtils';
-import { adjustSectionValue, isAndroid, cleanString } from './useField.utils';
+import { adjustSectionValue, isAndroid, cleanString, getSectionOrder } from './useField.utils';
 import { useFieldState } from './useFieldState';
 import { useFieldCharacterEditing } from './useFieldCharacterEditing';
 import { getActiveElement } from '../../utils/utils';
@@ -22,7 +23,6 @@ export const useField = params => {
     updateSectionValue,
     updateValueFromValueStr,
     setTempAndroidValueStr,
-    sectionOrder,
     sectionsValueBoundaries
   } = useFieldState(params);
   const {
@@ -38,7 +38,8 @@ export const useField = params => {
       inputRef: inputRefProp,
       internalProps,
       internalProps: {
-        readOnly = false
+        readOnly = false,
+        unstableFieldRef
       },
       forwardedProps: {
         onClick,
@@ -57,6 +58,8 @@ export const useField = params => {
   const inputRef = React.useRef(null);
   const handleRef = useForkRef(inputRefProp, inputRef);
   const focusTimeoutRef = React.useRef(undefined);
+  const theme = useTheme();
+  const sectionOrder = React.useMemo(() => getSectionOrder(state.sections, theme.direction === 'rtl'), [theme.direction, state.sections]);
   const syncSelectionFromDOM = () => {
     var _selectionStart;
     if (readOnly) {
@@ -144,27 +147,32 @@ export const useField = params => {
       updateValueFromValueStr(cleanValueStr);
       return;
     }
-    const prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections));
-    let startOfDiffIndex = -1;
-    let endOfDiffIndex = -1;
-    for (let i = 0; i < prevValueStr.length; i += 1) {
-      if (startOfDiffIndex === -1 && prevValueStr[i] !== cleanValueStr[i]) {
-        startOfDiffIndex = i;
+    let keyPressed;
+    if (selectedSectionIndexes.startIndex === 0 && selectedSectionIndexes.endIndex === state.sections.length - 1) {
+      keyPressed = cleanValueStr;
+    } else {
+      const prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections));
+      let startOfDiffIndex = -1;
+      let endOfDiffIndex = -1;
+      for (let i = 0; i < prevValueStr.length; i += 1) {
+        if (startOfDiffIndex === -1 && prevValueStr[i] !== cleanValueStr[i]) {
+          startOfDiffIndex = i;
+        }
+        if (endOfDiffIndex === -1 && prevValueStr[prevValueStr.length - i - 1] !== cleanValueStr[cleanValueStr.length - i - 1]) {
+          endOfDiffIndex = i;
+        }
       }
-      if (endOfDiffIndex === -1 && prevValueStr[prevValueStr.length - i - 1] !== cleanValueStr[cleanValueStr.length - i - 1]) {
-        endOfDiffIndex = i;
+      const activeSection = state.sections[selectedSectionIndexes.startIndex];
+      const hasDiffOutsideOfActiveSection = startOfDiffIndex < activeSection.start || prevValueStr.length - endOfDiffIndex - 1 > activeSection.end;
+      if (hasDiffOutsideOfActiveSection) {
+        // TODO: Support if the new date is valid
+        return;
       }
-    }
-    const activeSection = state.sections[selectedSectionIndexes.startIndex];
-    const hasDiffOutsideOfActiveSection = startOfDiffIndex < activeSection.start || prevValueStr.length - endOfDiffIndex - 1 > activeSection.end;
-    if (hasDiffOutsideOfActiveSection) {
-      // TODO: Support if the new date is valid
-      return;
-    }
 
-    // The active section being selected, the browser has replaced its value with the key pressed by the user.
-    const activeSectionEndRelativeToNewValue = cleanValueStr.length - prevValueStr.length + activeSection.end - cleanString(activeSection.endSeparator || '').length;
-    const keyPressed = cleanValueStr.slice(activeSection.start, activeSectionEndRelativeToNewValue);
+      // The active section being selected, the browser has replaced its value with the key pressed by the user.
+      const activeSectionEndRelativeToNewValue = cleanValueStr.length - prevValueStr.length + activeSection.end - cleanString(activeSection.endSeparator || '').length;
+      keyPressed = cleanValueStr.slice(activeSection.start, activeSectionEndRelativeToNewValue);
+    }
     if (isAndroid() && keyPressed.length === 0) {
       setTempAndroidValueStr(valueStr);
       return;
@@ -260,9 +268,11 @@ export const useField = params => {
   });
   useEnhancedEffect(() => {
     if (selectedSectionIndexes == null) {
-      if (inputRef.current.selectionStart !== 0 || inputRef.current.selectionEnd !== 0) {
-        // Ensure input selection range is in sync with component selection indexes
-        inputRef.current.setSelectionRange(0, 0);
+      if (inputRef.current.scrollLeft) {
+        // Ensure that input content is not marked as selected.
+        // setting selection range to 0 causes issues in Safari.
+        // https://bugs.webkit.org/show_bug.cgi?id=224425
+        inputRef.current.scrollLeft = 0;
       }
       return;
     }
@@ -275,7 +285,11 @@ export const useField = params => {
       selectionEnd += lastSelectedSection.endSeparator.length;
     }
     if (selectionStart !== inputRef.current.selectionStart || selectionEnd !== inputRef.current.selectionEnd) {
+      // Fix scroll jumping on iOS browser: https://github.com/mui/mui-x/issues/8321
+      const currentScrollTop = inputRef.current.scrollTop;
       inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+      // Even reading this variable seems to do the trick, but also setting it just to make use of it
+      inputRef.current.scrollTop = currentScrollTop;
     }
   });
   const validationError = useValidation(_extends({}, internalProps, {
@@ -322,7 +336,22 @@ export const useField = params => {
     return 'tel';
   }, [selectedSectionIndexes, state.sections]);
   const inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document);
-  const shouldShowPlaceholder = !inputHasFocus && (!state.value || valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue));
+  const shouldShowPlaceholder = !inputHasFocus && valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);
+  React.useImperativeHandle(unstableFieldRef, () => ({
+    getSections: () => state.sections,
+    getActiveSectionIndex: () => {
+      var _selectionStart2, _selectionEnd;
+      const browserStartIndex = (_selectionStart2 = inputRef.current.selectionStart) != null ? _selectionStart2 : 0;
+      const browserEndIndex = (_selectionEnd = inputRef.current.selectionEnd) != null ? _selectionEnd : 0;
+      if (browserStartIndex === 0 && browserEndIndex === 0) {
+        return null;
+      }
+      const nextSectionIndex = browserStartIndex <= state.sections[0].startInInput ? 1 // Special case if browser index is in invisible characters at the beginning.
+      : state.sections.findIndex(section => section.startInInput - section.startSeparator.length > browserStartIndex);
+      return nextSectionIndex === -1 ? state.sections.length - 1 : nextSectionIndex - 1;
+    },
+    setSelectedSections: activeSectionIndex => setSelectedSections(activeSectionIndex)
+  }));
   return _extends({
     placeholder: state.placeholder,
     autoComplete: 'off'

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

@@ -3,7 +3,7 @@ import { FieldSectionType, MuiPickersAdapter } from '../../models';
 import type { PickerValueManager } from '../usePicker';
 import { InferError, Validator } from '../validation/useValidation';
 import { PickersLocaleText } from '../../../locales/utils/pickersLocaleTextApi';
-export interface UseFieldParams<TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any>> {
+export interface UseFieldParams<TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any>> {
     inputRef?: React.Ref<HTMLInputElement>;
     forwardedProps: TForwardedProps;
     internalProps: TInternalProps;
@@ -12,7 +12,7 @@ export interface UseFieldParams<TValue, TDate, TSection extends FieldSection, TF
     validator: Validator<TValue, TDate, InferError<TInternalProps>, UseFieldValidationProps<TValue, TInternalProps>>;
     valueType: FieldValueType;
 }
-export interface UseFieldInternalProps<TValue, TError> {
+export interface UseFieldInternalProps<TValue, TSection extends FieldSection, TError> {
     /**
      * The selected value.
      * Used when the component is controlled.
@@ -63,6 +63,28 @@ export interface UseFieldInternalProps<TValue, TError> {
      * @param {FieldSelectedSections} newValue The new selected sections.
      */
     onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+    /**
+     * The ref object used to imperatively interact with the field.
+     */
+    unstableFieldRef?: React.Ref<FieldRef<TSection>>;
+}
+export interface FieldRef<TSection extends FieldSection> {
+    /**
+     * Returns the sections of the current value.
+     * @returns {TSection[]} The sections of the current value.
+     */
+    getSections: () => TSection[];
+    /**
+     * Returns the index of the active section (the first focused section).
+     * If no section is active, returns `null`.
+     * @returns {number | null} The index of the active section.
+     */
+    getActiveSectionIndex: () => number | null;
+    /**
+     * Updates the selected sections.
+     * @param {FieldSelectedSections} selectedSections The sections to select.
+     */
+    setSelectedSections: (selectedSections: FieldSelectedSections) => void;
 }
 export interface UseFieldForwardedProps {
     onKeyDown?: React.KeyboardEventHandler;
@@ -269,16 +291,6 @@ export interface FieldValueManager<TValue, TDate, TSection extends FieldSection,
      * @returns {boolean} `true` if the current error is not empty.
      */
     hasError: (error: TError) => boolean;
-    /**
-     * Return a description of sections display order. This description is useful in RTL mode.
-     * @template TDate
-     * @param {MuiPickersAdapter<TDate>} utils The utils to manipulate the date.
-     * @param {PickersLocaleText<TDate>} localeText The translation object.
-     * @param {string} format The format from which sections are computed.
-     * @param {boolean} isRTL Is the field in right-to-left orientation.
-     * @returns {SectionOrdering} The description of sections order from left to right.
-     */
-    getSectionOrder: (utils: MuiPickersAdapter<TDate>, localeText: PickersLocaleText<TDate>, format: string, isRTL: boolean) => SectionOrdering;
 }
 export interface UseFieldState<TValue, TSection extends FieldSection> {
     value: TValue;

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

@@ -13,7 +13,7 @@ export interface UpdateSectionValueParams<TSection extends FieldSection> {
      */
     shouldGoToNextSection: boolean;
 }
-export declare const useFieldState: <TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any>>(params: UseFieldParams<TValue, TDate, TSection, TForwardedProps, TInternalProps>) => {
+export declare const useFieldState: <TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any>>(params: UseFieldParams<TValue, TDate, TSection, TForwardedProps, TInternalProps>) => {
     state: UseFieldState<TValue, TSection>;
     selectedSectionIndexes: FieldSelectedSectionsIndexes | null;
     setSelectedSections: (newSelectedSections: FieldSelectedSections) => void;
@@ -22,6 +22,5 @@ export declare const useFieldState: <TValue, TDate, TSection extends FieldSectio
     updateSectionValue: ({ activeSection, newSectionValue, shouldGoToNextSection, }: UpdateSectionValueParams<TSection>) => void;
     updateValueFromValueStr: (valueStr: string) => void;
     setTempAndroidValueStr: (tempValueStrAndroid: string | null) => void;
-    sectionOrder: import("./useField.types").SectionOrdering;
     sectionsValueBoundaries: import("./useField.types").FieldSectionsValueBoundaries<TDate>;
 };

package/internals/hooks/useField/useFieldState.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
 import useControlled from '@mui/utils/useControlled';
 import { useUtils, useLocaleText, useLocalizationContext } from '../useUtils';
 import { addPositionPropertiesToSections, splitFormatIntoSections, clampDaySection, mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections } from './useField.utils';
@@ -9,8 +8,6 @@ export const useFieldState = params => {
   const utils = useUtils();
   const localeText = useLocaleText();
   const adapter = useLocalizationContext();
-  const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
   const {
     valueManager,
     fieldValueManager,
@@ -29,7 +26,6 @@ export const useFieldState = params => {
   const firstDefaultValue = React.useRef(defaultValue);
   const valueFromTheOutside = (_ref = valueProp != null ? valueProp : firstDefaultValue.current) != null ? _ref : valueManager.emptyValue;
   const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils), [utils]);
-  const sectionOrder = React.useMemo(() => fieldValueManager.getSectionOrder(utils, localeText, format, isRTL), [fieldValueManager, format, isRTL, localeText, utils]);
   const placeholder = React.useMemo(() => fieldValueManager.getValueStrFromSections(fieldValueManager.getSectionsFromValue(utils, localeText, null, valueManager.emptyValue, format)), [fieldValueManager, format, localeText, utils, valueManager.emptyValue]);
   const [state, setState] = React.useState(() => {
     const sections = fieldValueManager.getSectionsFromValue(utils, localeText, null, valueFromTheOutside, format);
@@ -217,7 +213,7 @@ export const useFieldState = params => {
   }));
   React.useEffect(() => {
     if (!valueManager.areValuesEqual(utils, state.value, valueFromTheOutside)) {
-      const sections = fieldValueManager.getSectionsFromValue(utils, localeText, state.sections, valueFromTheOutside, format);
+      const sections = fieldValueManager.getSectionsFromValue(utils, localeText, null, valueFromTheOutside, format);
       setState(prevState => _extends({}, prevState, {
         value: valueFromTheOutside,
         referenceValue: fieldValueManager.updateReferenceValue(utils, valueFromTheOutside, prevState.referenceValue),
@@ -244,7 +240,6 @@ export const useFieldState = params => {
     updateSectionValue,
     updateValueFromValueStr,
     setTempAndroidValueStr,
-    sectionOrder,
     sectionsValueBoundaries
   };
 };

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

@@ -10,11 +10,12 @@ import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponen
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue';
 import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
 import { UncapitalizeObjectKeys } from '../../utils/slots-migration';
+import { FieldSection } from '../useField';
 export interface UseMobilePickerSlotsComponent<TDate, TView extends DateOrTimeView> extends PickersModalDialogSlotsComponent, ExportedPickersLayoutSlotsComponent<TDate | null, TDate, TView> {
     /**
      * Component used to enter the date with the keyboard.
      */
-    Field: React.ElementType<BaseSingleInputFieldProps<TDate | null, any>>;
+    Field: React.ElementType<BaseSingleInputFieldProps<TDate | null, FieldSection, any>>;
     /**
      * Form control with an input to render the value inside the default field.
      * Receives the same props as `@mui/material/TextField`.
@@ -23,12 +24,12 @@ export interface UseMobilePickerSlotsComponent<TDate, TView extends DateOrTimeVi
     TextField?: React.ElementType<TextFieldProps>;
 }
 export interface ExportedUseMobilePickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends PickersModalDialogSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<TDate | null, TDate, TView> {
-    field?: SlotComponentProps<React.ElementType<BaseSingleInputFieldProps<TDate | null, unknown>>, {}, UsePickerProps<TDate | null, any, any, any, any>>;
+    field?: SlotComponentProps<React.ElementType<BaseSingleInputFieldProps<TDate | null, FieldSection, unknown>>, {}, UsePickerProps<TDate | null, any, FieldSection, any, any, any>>;
     textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
 }
 export interface UseMobilePickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends ExportedUseMobilePickerSlotsComponentsProps<TDate, TView>, Pick<PickersLayoutSlotsComponentsProps<TDate | null, TDate, TView>, 'toolbar'> {
 }
-export interface MobileOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, BaseSingleInputNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null>, UsePickerViewsNonStaticProps {
+export interface MobileOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, BaseSingleInputNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null, FieldSection>, UsePickerViewsNonStaticProps {
 }
 export interface UseMobilePickerProps<TDate, TView extends DateOrTimeView, TError, TExternalProps extends UsePickerViewsProps<any, TView, any, any>> extends BasePickerProps<TDate | null, TDate, TView, TError, TExternalProps, {}>, MobileOnlyPickerProps<TDate> {
     /**
@@ -42,7 +43,7 @@ export interface UseMobilePickerProps<TDate, TView extends DateOrTimeView, TErro
      */
     slotProps?: UseMobilePickerSlotsComponentsProps<TDate, TView>;
 }
-export interface UseMobilePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseMobilePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, TExternalProps, {}>, 'valueManager' | 'validator'> {
+export interface UseMobilePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseMobilePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'validator'> {
     props: TExternalProps;
     getOpenDialogAriaText: (date: TDate | null, utils: MuiPickersAdapter<TDate>) => string;
 }

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

@@ -1,4 +1,5 @@
 import { DateOrTimeView } from '../../models';
 import { UsePickerParams, UsePickerProps, UsePickerResponse } from './usePicker.types';
 import { InferError } from '../validation/useValidation';
-export declare const usePicker: <TValue, TDate, TView extends DateOrTimeView, TExternalProps extends UsePickerProps<TValue, TView, any, any, any>, TAdditionalProps extends {}>({ props, valueManager, wrapperVariant, inputRef, additionalViewProps, validator, autoFocusView, }: UsePickerParams<TValue, TDate, TView, TExternalProps, TAdditionalProps>) => UsePickerResponse<TValue, TView, InferError<TExternalProps>>;
+import { FieldSection } from '../useField';
+export declare const usePicker: <TValue, TDate, TView extends DateOrTimeView, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TView, TSection, any, any, any>, TAdditionalProps extends {}>({ props, valueManager, wrapperVariant, inputRef, additionalViewProps, validator, autoFocusView, }: UsePickerParams<TValue, TDate, TView, TSection, TExternalProps, TAdditionalProps>) => UsePickerResponse<TValue, TView, TSection, InferError<TExternalProps>>;

package/internals/hooks/usePicker/usePicker.types.d.ts

@@ -2,15 +2,16 @@ import { DateOrTimeView } from '../../models/views';
 import { UsePickerValueParams, UsePickerValueProps, UsePickerValueBaseProps, UsePickerValueResponse } from './usePickerValue';
 import { UsePickerViewsProps, UsePickerViewParams, UsePickerViewsResponse, UsePickerViewsBaseProps } from './usePickerViews';
 import { UsePickerLayoutProps, UsePickerLayoutPropsResponse } from './usePickerLayoutProps';
+import { FieldSection } from '../useField';
 /**
  * Props common to all picker headless implementations.
  */
 export interface UsePickerBaseProps<TValue, TView extends DateOrTimeView, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueBaseProps<TValue, TError>, UsePickerViewsBaseProps<TValue, TView, TExternalProps, TAdditionalProps>, UsePickerLayoutProps {
 }
-export interface UsePickerProps<TValue, TView extends DateOrTimeView, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueProps<TValue, TError>, UsePickerViewsProps<TValue, TView, TExternalProps, TAdditionalProps>, UsePickerLayoutProps {
+export interface UsePickerProps<TValue, TView extends DateOrTimeView, TSection extends FieldSection, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueProps<TValue, TSection, TError>, UsePickerViewsProps<TValue, TView, TExternalProps, TAdditionalProps>, UsePickerLayoutProps {
 }
-export interface UsePickerParams<TValue, TDate, TView extends DateOrTimeView, TExternalProps extends UsePickerProps<TValue, TView, any, any, any>, TAdditionalProps extends {}> extends Pick<UsePickerValueParams<TValue, TDate, TExternalProps>, 'valueManager' | 'wrapperVariant' | 'validator'>, Pick<UsePickerViewParams<TValue, TView, TExternalProps, TAdditionalProps>, 'additionalViewProps' | 'inputRef' | 'autoFocusView'> {
+export interface UsePickerParams<TValue, TDate, TView extends DateOrTimeView, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TView, TSection, any, any, any>, TAdditionalProps extends {}> extends Pick<UsePickerValueParams<TValue, TDate, TSection, TExternalProps>, 'valueManager' | 'wrapperVariant' | 'validator'>, Pick<UsePickerViewParams<TValue, TView, TExternalProps, TAdditionalProps>, 'additionalViewProps' | 'inputRef' | 'autoFocusView'> {
     props: TExternalProps;
 }
-export interface UsePickerResponse<TValue, TView extends DateOrTimeView, TError> extends Omit<UsePickerValueResponse<TValue, TError>, 'viewProps' | 'layoutProps'>, Omit<UsePickerViewsResponse<TView>, 'layoutProps'>, UsePickerLayoutPropsResponse<TValue, TView> {
+export interface UsePickerResponse<TValue, TView extends DateOrTimeView, TSection extends FieldSection, TError> extends Omit<UsePickerValueResponse<TValue, TSection, TError>, 'viewProps' | 'layoutProps'>, Omit<UsePickerViewsResponse<TView>, 'layoutProps'>, UsePickerLayoutPropsResponse<TValue, TView> {
 }

package/internals/hooks/usePicker/usePickerValue.d.ts

@@ -1,4 +1,4 @@
-import { FieldSelectedSections, UseFieldInternalProps } from '../useField';
+import { FieldSection, FieldSelectedSections, UseFieldInternalProps } from '../useField';
 import { InferError, Validator } from '../validation/useValidation';
 import { UseFieldValidationProps } from '../useField/useField.types';
 import { WrapperVariant } from '../../models/common';
@@ -101,7 +101,7 @@ export interface UsePickerValueBaseProps<TValue, TError> {
 /**
  * Props used to handle the value of non-static pickers.
  */
-export interface UsePickerValueNonStaticProps<TValue> extends Pick<UseFieldInternalProps<TValue, unknown>, 'selectedSections' | 'onSelectedSectionsChange'> {
+export interface UsePickerValueNonStaticProps<TValue, TSection extends FieldSection> extends Pick<UseFieldInternalProps<TValue, TSection, unknown>, 'selectedSections' | 'onSelectedSectionsChange'> {
     /**
      * If `true`, the popover or modal will close after submitting the full date.
      * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
@@ -126,9 +126,9 @@ export interface UsePickerValueNonStaticProps<TValue> extends Pick<UseFieldInter
 /**
  * Props used to handle the value of the pickers.
  */
-export interface UsePickerValueProps<TValue, TError> extends UsePickerValueBaseProps<TValue, TError>, UsePickerValueNonStaticProps<TValue> {
+export interface UsePickerValueProps<TValue, TSection extends FieldSection, TError> extends UsePickerValueBaseProps<TValue, TError>, UsePickerValueNonStaticProps<TValue, TSection> {
 }
-export interface UsePickerValueParams<TValue, TDate, TExternalProps extends UsePickerValueProps<TValue, any>> {
+export interface UsePickerValueParams<TValue, TDate, TSection extends FieldSection, TExternalProps extends UsePickerValueProps<TValue, TSection, any>> {
     props: TExternalProps;
     valueManager: PickerValueManager<TValue, TDate, InferError<TExternalProps>>;
     wrapperVariant: WrapperVariant;
@@ -143,7 +143,7 @@ export interface UsePickerValueActions {
     onOpen: () => void;
     onClose: () => void;
 }
-type UsePickerValueFieldResponse<TValue, TError> = Required<Pick<UseFieldInternalProps<TValue, TError>, 'value' | 'onChange' | 'selectedSections' | 'onSelectedSectionsChange'>>;
+type UsePickerValueFieldResponse<TValue, TSection extends FieldSection, TError> = Required<Pick<UseFieldInternalProps<TValue, TSection, TError>, 'value' | 'onChange' | 'selectedSections' | 'onSelectedSectionsChange'>>;
 /**
  * Props passed to `usePickerViews`.
  */
@@ -162,15 +162,15 @@ export interface UsePickerValueLayoutResponse<TValue> extends UsePickerValueActi
     onChange: (newValue: TValue) => void;
     isValid: (value: TValue) => boolean;
 }
-export interface UsePickerValueResponse<TValue, TError> {
+export interface UsePickerValueResponse<TValue, TSection extends FieldSection, TError> {
     open: boolean;
     actions: UsePickerValueActions;
     viewProps: UsePickerValueViewsResponse<TValue>;
-    fieldProps: UsePickerValueFieldResponse<TValue, TError>;
+    fieldProps: UsePickerValueFieldResponse<TValue, TSection, TError>;
     layoutProps: UsePickerValueLayoutResponse<TValue>;
 }
 /**
  * Manage the value lifecycle of all the pickers.
  */
-export declare const usePickerValue: <TValue, TDate, TExternalProps extends UsePickerValueProps<TValue, any>>({ props, valueManager, wrapperVariant, validator, }: UsePickerValueParams<TValue, TDate, TExternalProps>) => UsePickerValueResponse<TValue, InferError<TExternalProps>>;
+export declare const usePickerValue: <TValue, TDate, TSection extends FieldSection, TExternalProps extends UsePickerValueProps<TValue, TSection, any>>({ props, valueManager, wrapperVariant, validator, }: UsePickerValueParams<TValue, TDate, TSection, TExternalProps>) => UsePickerValueResponse<TValue, TSection, InferError<TExternalProps>>;
 export {};

package/internals/hooks/usePicker/usePickerValue.js

@@ -25,13 +25,12 @@ export const usePickerValue = ({
   } = props;
   const utils = useUtils();
   const adapter = useLocalizationContext();
-  const [rawValue, setValue] = useControlled({
+  const [value, setValue] = useControlled({
     controlled: inValue,
     default: defaultValue != null ? defaultValue : valueManager.emptyValue,
     name: 'usePickerValue',
     state: 'value'
   });
-  const value = React.useMemo(() => valueManager.cleanValue(utils, rawValue), [valueManager, utils, rawValue]);
   const [selectedSections, setSelectedSections] = useControlled({
     controlled: selectedSectionsProp,
     default: null,
@@ -81,7 +80,7 @@ export const usePickerValue = ({
           }
       }
     });
-    if (params.forceOnChangeCall || !params.skipOnChangeCall && !valueManager.areValuesEqual(utils, dateState.committed, params.value)) {
+    if (!params.skipOnChangeCall && !valueManager.areValuesEqual(utils, dateState.committed, params.value)) {
       setValue(params.value);
       if (onChange) {
         const context = {
@@ -126,18 +125,14 @@ export const usePickerValue = ({
     // Reset all date in state to the empty value and close picker.
     setDate({
       value: valueManager.emptyValue,
-      action: 'acceptAndClose',
-      // force `onChange` in cases like input (value) === `Invalid date`
-      forceOnChangeCall: !valueManager.areValuesEqual(utils, value, valueManager.emptyValue)
+      action: 'acceptAndClose'
     });
   });
   const handleAccept = useEventCallback(() => {
     // Set all date in state to equal the current draft value and close picker.
     setDate({
       value: dateState.draft,
-      action: 'acceptAndClose',
-      // force `onChange` in cases like input (value) === `Invalid date`
-      forceOnChangeCall: !valueManager.areValuesEqual(utils, dateState.committed, dateState.draft)
+      action: 'acceptAndClose'
     });
   });
   const handleDismiss = useEventCallback(() => {
@@ -230,8 +225,9 @@ export const usePickerValue = ({
     selectedSections,
     onSelectedSectionsChange: handleFieldSelectedSectionsChange
   };
+  const viewValue = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
   const viewResponse = {
-    value: dateState.draft,
+    value: viewValue,
     onChange: handleChange,
     onClose: handleClose,
     open: isOpen,
@@ -248,7 +244,7 @@ export const usePickerValue = ({
     return Array.isArray(testedValue) ? validationResponse.every(v => v === null) : validationResponse === null;
   };
   const layoutResponse = _extends({}, actions, {
-    value: dateState.draft,
+    value: viewValue,
     onChange: handleChangeAndCommit,
     isValid
   });

package/internals/hooks/useStaticPicker/useStaticPicker.types.d.ts

@@ -5,6 +5,7 @@ import { BasePickerProps } from '../../models/props/basePickerProps';
 import { UncapitalizeObjectKeys } from '../../utils/slots-migration';
 import { UsePickerParams } from '../usePicker';
 import { UsePickerViewsProps } from '../usePicker/usePickerViews';
+import { FieldSection } from '../useField';
 export interface UseStaticPickerSlotsComponent<TDate, TView extends DateOrTimeView> extends ExportedPickersLayoutSlotsComponent<TDate | null, TDate, TView> {
 }
 export interface UseStaticPickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends ExportedPickersLayoutSlotsComponentsProps<TDate | null, TDate, TView> {
@@ -50,7 +51,7 @@ export interface UseStaticPickerProps<TDate, TView extends DateOrTimeView, TErro
      */
     slotProps?: UseStaticPickerSlotsComponentsProps<TDate, TView>;
 }
-export interface UseStaticPickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseStaticPickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, TExternalProps, {}>, 'valueManager' | 'validator'> {
+export interface UseStaticPickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseStaticPickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'validator'> {
     props: TExternalProps;
     /**
      * Ref to pass to the root element

package/internals/index.d.ts

@@ -22,7 +22,7 @@ export type { PickersPopperClassKey, PickersPopperClasses, } from './components/
 export { PickersToolbarButton } from './components/PickersToolbarButton';
 export { DAY_MARGIN, DIALOG_WIDTH } from './constants/dimensions';
 export type { DesktopOnlyPickerProps } from './hooks/useDesktopPicker';
-export { useField, createDateStrForInputFromSections, addPositionPropertiesToSections, splitFormatIntoSections, getSectionOrder, } from './hooks/useField';
+export { useField, createDateStrForInputFromSections, addPositionPropertiesToSections, splitFormatIntoSections, } from './hooks/useField';
 export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, UseFieldForwardedProps, FieldValueManager, FieldSection, FieldChangeHandler, FieldChangeHandlerContext, } from './hooks/useField';
 export type { MobileOnlyPickerProps } from './hooks/useMobilePicker';
 export { usePicker } from './hooks/usePicker';
@@ -50,7 +50,7 @@ export type { MuiPickersAdapter } from './models/muiPickersAdapter';
 export type { DefaultizedProps, MakeOptional } from './models/helpers';
 export type { DateOrTimeView, DateView, TimeView } from './models/views';
 export type { WrapperVariant } from './models/common';
-export { applyDefaultDate, replaceInvalidDateByNull } from './utils/date-utils';
+export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual } from './utils/date-utils';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, } from './utils/utils';
 export { defaultReduceAnimations } from './utils/defaultReduceAnimations';
 export { extractValidationProps } from './utils/validation';

package/internals/index.js

@@ -9,7 +9,7 @@ export { pickersArrowSwitcherClasses } from './components/PickersArrowSwitcher/p
 export { pickersPopperClasses } from './components/pickersPopperClasses';
 export { PickersToolbarButton } from './components/PickersToolbarButton';
 export { DAY_MARGIN, DIALOG_WIDTH } from './constants/dimensions';
-export { useField, createDateStrForInputFromSections, addPositionPropertiesToSections, splitFormatIntoSections, getSectionOrder } from './hooks/useField';
+export { useField, createDateStrForInputFromSections, addPositionPropertiesToSections, splitFormatIntoSections } from './hooks/useField';
 export { usePicker } from './hooks/usePicker';
 export { useStaticPicker } from './hooks/useStaticPicker';
 export { useLocalizationContext, useDefaultDates, useUtils, useLocaleText, useNow } from './hooks/useUtils';
@@ -18,7 +18,7 @@ export { validateDate } from './hooks/validation/useDateValidation';
 export { validateTime } from './hooks/validation/useTimeValidation';
 export { validateDateTime } from './hooks/validation/useDateTimeValidation';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
-export { applyDefaultDate, replaceInvalidDateByNull } from './utils/date-utils';
+export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual } from './utils/date-utils';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './utils/utils';
 export { defaultReduceAnimations } from './utils/defaultReduceAnimations';
 export { extractValidationProps } from './utils/validation';

package/internals/models/fields.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
-import type { UseFieldInternalProps } from '../hooks/useField';
-export interface BaseFieldProps<TValue, TError> extends Omit<UseFieldInternalProps<TValue, TError>, 'format'> {
+import type { FieldSection, UseFieldInternalProps } from '../hooks/useField';
+export interface BaseFieldProps<TValue, TSection extends FieldSection, TError> extends Omit<UseFieldInternalProps<TValue, TSection, TError>, 'format'> {
     className?: string;
     format?: string;
     disabled?: boolean;
@@ -12,7 +12,7 @@ export interface BaseFieldProps<TValue, TError> extends Omit<UseFieldInternalPro
  * Props the single input field can receive when used inside a picker.
  * Only contains what the MUI component are passing to the field, not what users can pass using the `props.slotProps.field`.
  */
-export interface BaseSingleInputFieldProps<TValue, TError> extends BaseFieldProps<TValue, TError> {
+export interface BaseSingleInputFieldProps<TValue, TSection extends FieldSection, TError> extends BaseFieldProps<TValue, TSection, TError> {
     label?: React.ReactNode;
     id?: string;
     InputProps?: {

package/internals/utils/date-utils.d.ts

@@ -12,4 +12,5 @@ export declare const findClosestEnabledDate: <TDate>({ date, disableFuture, disa
 export declare const clamp: <TDate>(utils: MuiPickersAdapter<TDate>, value: TDate, minDate: TDate, maxDate: TDate) => TDate;
 export declare const replaceInvalidDateByNull: <TDate>(utils: MuiPickersAdapter<TDate>, value: TDate | null) => NonNullable<TDate> | null;
 export declare const applyDefaultDate: <TDate>(utils: MuiPickersAdapter<TDate>, value: TDate | null | undefined, defaultValue: TDate) => TDate;
+export declare const areDatesEqual: <TDate>(utils: MuiPickersAdapter<TDate>, a: TDate, b: TDate) => boolean;
 export {};

package/internals/utils/date-utils.js

@@ -63,4 +63,10 @@ export const applyDefaultDate = (utils, value, defaultValue) => {
     return defaultValue;
   }
   return value;
+};
+export const areDatesEqual = (utils, a, b) => {
+  if (!utils.isValid(a) && a != null && !utils.isValid(b) && b != null) {
+    return true;
+  }
+  return utils.isEqual(a, b);
 };

package/internals/utils/valueManagers.js

@@ -1,10 +1,10 @@
-import { replaceInvalidDateByNull } from './date-utils';
-import { addPositionPropertiesToSections, createDateStrForInputFromSections, splitFormatIntoSections, getSectionOrder } from '../hooks/useField/useField.utils';
+import { areDatesEqual, replaceInvalidDateByNull } from './date-utils';
+import { addPositionPropertiesToSections, createDateStrForInputFromSections, splitFormatIntoSections } from '../hooks/useField/useField.utils';
 export const singleItemValueManager = {
   emptyValue: null,
   getTodayValue: utils => utils.date(),
   cleanValue: replaceInvalidDateByNull,
-  areValuesEqual: (utils, a, b) => utils.isEqual(a, b),
+  areValuesEqual: areDatesEqual,
   isSameError: (a, b) => a === b,
   defaultErrorState: null
 };
@@ -28,6 +28,5 @@ export const singleItemFieldValueManager = {
     })
   }),
   parseValueStr: (valueStr, referenceValue, parseDate) => parseDate(valueStr.trim(), referenceValue),
-  hasError: error => error != null,
-  getSectionOrder: (utils, localeText, format, isRTL) => getSectionOrder(splitFormatIntoSections(utils, localeText, format, null), isRTL)
+  hasError: error => error != null
 };

package/legacy/AdapterDateFns/index.js

@@ -150,6 +150,7 @@ export var AdapterDateFns = /*#__PURE__*/function (_BaseAdapterDateFns) {
         return token;
       }).join('');
     };
+    // Redefined here just to show how it can be written using expandFormat
     _this.getFormatHelperText = function (format) {
       return _this.expandFormat(format).replace(/(aaa|aa|a)/g, '(a|p)m').toLocaleLowerCase();
     };

package/legacy/AdapterDateFnsJalali/index.js

@@ -82,6 +82,7 @@ export var AdapterDateFnsJalali = /*#__PURE__*/function (_BaseAdapterDateFnsJa)
         return token;
       }).join('');
     };
+    // Redefined here just to show how it can be written using expandFormat
     _this.getFormatHelperText = function (format) {
       return _this.expandFormat(format).replace(/(aaa|aa|a)/g, '(a|p)m').toLocaleLowerCase();
     };

package/legacy/AdapterDayjs/index.js

@@ -87,6 +87,10 @@ export var AdapterDayjs = /*#__PURE__*/function (_BaseAdapterDayjs) {
       /* istanbul ignore next */
       return /A|a/.test(_this.getLocaleFormats().LT || '');
     };
+    /**
+     * The current getFormatHelperText method uses an outdated format parsing logic.
+     * We should use this one in the future to support all localized formats.
+     */
     _this.expandFormat = function (format) {
       var localeFormats = _this.getLocaleFormats();
 
@@ -101,6 +105,7 @@ export var AdapterDayjs = /*#__PURE__*/function (_BaseAdapterDayjs) {
         return a || localeFormats[b] || t(localeFormats[B]);
       });
     };
+    // Redefined here just to show how it can be written using expandFormat
     _this.getFormatHelperText = function (format) {
       return _this.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
     };

package/legacy/AdapterLuxon/index.js

@@ -105,6 +105,7 @@ export var AdapterLuxon = /*#__PURE__*/function (_BaseAdapterLuxon) {
         locale: _this.locale
       }).replace('yyyyy', 'yyyy');
     };
+    // Redefined here just to show how it can be written using expandFormat
     _this.getFormatHelperText = function (format) {
       return _this.expandFormat(format).replace(/(a)/g, '(a|p)m').toLocaleLowerCase();
     };