@mui/x-date-pickers 7.0.0-beta.1 → 7.0.0-beta.4

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

@@ -0,0 +1,400 @@
+import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useId from '@mui/utils/useId';
+import { getSectionValueNow, getSectionValueText, parseSelectedSections } from './useField.utils';
+import { getActiveElement } from '../../utils/utils';
+import { useLocaleText, useUtils } from '../useUtils';
+export const useFieldV7TextField = params => {
+  const {
+    internalProps: {
+      disabled,
+      readOnly = false
+    },
+    forwardedProps: {
+      sectionListRef: inSectionListRef,
+      onBlur,
+      onClick,
+      onFocus,
+      onInput,
+      onPaste,
+      focused: focusedProp,
+      autoFocus = false
+    },
+    fieldValueManager,
+    applyCharacterEditing,
+    resetCharacterQuery,
+    setSelectedSections,
+    parsedSelectedSections,
+    state,
+    clearActiveSection,
+    clearValue,
+    updateSectionValue,
+    updateValueFromValueStr,
+    sectionOrder,
+    areAllSectionsEmpty,
+    sectionsValueBoundaries
+  } = params;
+  const sectionListRef = React.useRef(null);
+  const handleSectionListRef = useForkRef(inSectionListRef, sectionListRef);
+  const localeText = useLocaleText();
+  const utils = useUtils();
+  const id = useId();
+  const [focused, setFocused] = React.useState(false);
+  const interactions = React.useMemo(() => ({
+    syncSelectionToDOM: () => {
+      if (!sectionListRef.current) {
+        return;
+      }
+      const selection = document.getSelection();
+      if (!selection) {
+        return;
+      }
+      if (parsedSelectedSections == null) {
+        // If the selection contains an element inside the field, we reset it.
+        if (selection.rangeCount > 0 && sectionListRef.current.getRoot().contains(selection.getRangeAt(0).startContainer)) {
+          selection.removeAllRanges();
+        }
+        if (focused) {
+          sectionListRef.current.getRoot().blur();
+        }
+        return;
+      }
+
+      // On multi input range pickers we want to update selection range only for the active input
+      if (!sectionListRef.current.getRoot().contains(getActiveElement(document))) {
+        return;
+      }
+      const range = new window.Range();
+      let target;
+      if (parsedSelectedSections === 'all') {
+        target = sectionListRef.current.getRoot();
+      } else {
+        const section = state.sections[parsedSelectedSections];
+        if (section.type === 'empty') {
+          target = sectionListRef.current.getSectionContainer(parsedSelectedSections);
+        } else {
+          target = sectionListRef.current.getSectionContent(parsedSelectedSections);
+        }
+      }
+      range.selectNodeContents(target);
+      target.focus();
+      selection.removeAllRanges();
+      selection.addRange(range);
+    },
+    getActiveSectionIndexFromDOM: () => {
+      const activeElement = getActiveElement(document);
+      if (!activeElement || !sectionListRef.current || !sectionListRef.current.getRoot().contains(activeElement)) {
+        return null;
+      }
+      return sectionListRef.current.getSectionIndexFromDOMElement(activeElement);
+    },
+    focusField: (newSelectedSections = 0) => {
+      if (!sectionListRef.current) {
+        return;
+      }
+      const newParsedSelectedSections = parseSelectedSections(newSelectedSections, state.sections);
+      setFocused(true);
+      sectionListRef.current.getSectionContent(newParsedSelectedSections).focus();
+    },
+    setSelectedSections: newSelectedSections => {
+      if (!sectionListRef.current) {
+        return;
+      }
+      const newParsedSelectedSections = parseSelectedSections(newSelectedSections, state.sections);
+      const newActiveSectionIndex = newParsedSelectedSections === 'all' ? 0 : newParsedSelectedSections;
+      setFocused(newActiveSectionIndex !== null);
+      setSelectedSections(newSelectedSections);
+    },
+    isFieldFocused: () => {
+      const activeElement = getActiveElement(document);
+      return !!sectionListRef.current && sectionListRef.current.getRoot().contains(activeElement);
+    }
+  }), [parsedSelectedSections, setSelectedSections, state.sections, focused]);
+
+  /**
+   * If a section content has been updated with a value we don't want to keep,
+   * Then we need to imperatively revert it (we can't let React do it because the value did not change in his internal representation).
+   */
+  const revertDOMSectionChange = useEventCallback(sectionIndex => {
+    if (!sectionListRef.current) {
+      return;
+    }
+    const section = state.sections[sectionIndex];
+    sectionListRef.current.getSectionContent(sectionIndex).innerHTML = section.value || section.placeholder;
+    interactions.syncSelectionToDOM();
+  });
+  const handleContainerClick = useEventCallback((event, ...args) => {
+    // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
+    // We avoid this by checking if the call of `handleContainerClick` is actually intended, or a side effect.
+    if (event.isDefaultPrevented() || !sectionListRef.current) {
+      return;
+    }
+    setFocused(true);
+    onClick?.(event, ...args);
+    if (parsedSelectedSections === 'all') {
+      window.setTimeout(() => {
+        const cursorPosition = document.getSelection().getRangeAt(0).startOffset;
+        if (cursorPosition === 0) {
+          setSelectedSections(sectionOrder.startIndex);
+          return;
+        }
+        let sectionIndex = 0;
+        let cursorOnStartOfSection = 0;
+        while (cursorOnStartOfSection < cursorPosition && sectionIndex < state.sections.length) {
+          const section = state.sections[sectionIndex];
+          sectionIndex += 1;
+          cursorOnStartOfSection += `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`.length;
+        }
+        setSelectedSections(sectionIndex - 1);
+      });
+    } else if (!focused) {
+      setFocused(true);
+      setSelectedSections(sectionOrder.startIndex);
+    } else {
+      const hasClickedOnASection = sectionListRef.current.getRoot().contains(event.target);
+      if (!hasClickedOnASection) {
+        setSelectedSections(sectionOrder.startIndex);
+      }
+    }
+  });
+  const handleContainerInput = useEventCallback(event => {
+    onInput?.(event);
+    if (!sectionListRef.current || parsedSelectedSections !== 'all') {
+      return;
+    }
+    const target = event.target;
+    const keyPressed = target.textContent ?? '';
+    sectionListRef.current.getRoot().innerHTML = state.sections.map(section => `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`).join('');
+    interactions.syncSelectionToDOM();
+    if (keyPressed.length === 0 || keyPressed.charCodeAt(0) === 10) {
+      resetCharacterQuery();
+      clearValue();
+      setSelectedSections('all');
+    } else if (keyPressed.length > 1) {
+      updateValueFromValueStr(keyPressed);
+    } else {
+      applyCharacterEditing({
+        keyPressed,
+        sectionIndex: 0
+      });
+    }
+  });
+  const handleContainerPaste = useEventCallback(event => {
+    onPaste?.(event);
+    if (readOnly || parsedSelectedSections !== 'all') {
+      event.preventDefault();
+      return;
+    }
+    const pastedValue = event.clipboardData.getData('text');
+    event.preventDefault();
+    resetCharacterQuery();
+    updateValueFromValueStr(pastedValue);
+  });
+  const handleContainerFocus = useEventCallback((...args) => {
+    onFocus?.(...args);
+    if (focused || !sectionListRef.current) {
+      return;
+    }
+    setFocused(true);
+    const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement(getActiveElement(document)) != null;
+    if (!isFocusInsideASection) {
+      setSelectedSections(sectionOrder.startIndex);
+    }
+  });
+  const handleContainerBlur = useEventCallback((...args) => {
+    onBlur?.(...args);
+    window.setTimeout(() => {
+      if (!sectionListRef.current) {
+        return;
+      }
+      const activeElement = getActiveElement(document);
+      const shouldBlur = !sectionListRef.current.getRoot().contains(activeElement);
+      if (shouldBlur) {
+        setFocused(false);
+        setSelectedSections(null);
+      }
+    });
+  });
+  const getInputContainerClickHandler = useEventCallback(sectionIndex => event => {
+    // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
+    // We avoid this by checking if the call to this function is actually intended, or a side effect.
+    if (event.isDefaultPrevented() || readOnly) {
+      return;
+    }
+    setSelectedSections(sectionIndex);
+  });
+  const handleInputContentMouseUp = useEventCallback(event => {
+    // Without this, the browser will remove the selected when clicking inside an already-selected section.
+    event.preventDefault();
+  });
+  const getInputContentFocusHandler = useEventCallback(sectionIndex => () => {
+    if (readOnly) {
+      return;
+    }
+    setSelectedSections(sectionIndex);
+  });
+  const handleInputContentPaste = useEventCallback(event => {
+    // prevent default to avoid the input `onInput` handler being called
+    event.preventDefault();
+    if (readOnly || typeof parsedSelectedSections !== 'number') {
+      return;
+    }
+    const activeSection = state.sections[parsedSelectedSections];
+    const pastedValue = event.clipboardData.getData('text');
+    const lettersOnly = /^[a-zA-Z]+$/.test(pastedValue);
+    const digitsOnly = /^[0-9]+$/.test(pastedValue);
+    const digitsAndLetterOnly = /^(([a-zA-Z]+)|)([0-9]+)(([a-zA-Z]+)|)$/.test(pastedValue);
+    const isValidPastedValue = activeSection.contentType === 'letter' && lettersOnly || activeSection.contentType === 'digit' && digitsOnly || activeSection.contentType === 'digit-with-letter' && digitsAndLetterOnly;
+    if (isValidPastedValue) {
+      resetCharacterQuery();
+      updateSectionValue({
+        activeSection,
+        newSectionValue: pastedValue,
+        shouldGoToNextSection: true
+      });
+    }
+    // If the pasted value corresponds to a single section, but not the expected type, we skip the modification
+    else if (!lettersOnly && !digitsOnly) {
+      resetCharacterQuery();
+      updateValueFromValueStr(pastedValue);
+    }
+  });
+  const handleInputContentDragOver = useEventCallback(event => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'none';
+  });
+  const handleInputContentInput = useEventCallback(event => {
+    if (!sectionListRef.current) {
+      return;
+    }
+    const target = event.target;
+    const keyPressed = target.textContent ?? '';
+    const sectionIndex = sectionListRef.current.getSectionIndexFromDOMElement(target);
+    const section = state.sections[sectionIndex];
+    if (readOnly || !sectionListRef.current) {
+      revertDOMSectionChange(sectionIndex);
+      return;
+    }
+    if (keyPressed.length === 0) {
+      if (section.value === '') {
+        revertDOMSectionChange(sectionIndex);
+        return;
+      }
+      resetCharacterQuery();
+      clearActiveSection();
+      return;
+    }
+    applyCharacterEditing({
+      keyPressed,
+      sectionIndex
+    });
+
+    // The DOM value needs to remain the one React is expecting.
+    revertDOMSectionChange(sectionIndex);
+  });
+  useEnhancedEffect(() => {
+    if (!focused || !sectionListRef.current) {
+      return;
+    }
+    if (parsedSelectedSections === 'all') {
+      sectionListRef.current.getRoot().focus();
+    } else if (typeof parsedSelectedSections === 'number') {
+      const domElement = sectionListRef.current.getSectionContent(parsedSelectedSections);
+      if (domElement) {
+        domElement.focus();
+      }
+    }
+  }, [parsedSelectedSections, focused]);
+  const sectionBoundaries = React.useMemo(() => {
+    return state.sections.reduce((acc, next) => {
+      acc[next.type] = sectionsValueBoundaries[next.type]({
+        currentDate: null,
+        contentType: next.contentType,
+        format: next.format
+      });
+      return acc;
+    }, {});
+  }, [sectionsValueBoundaries, state.sections]);
+  const isContainerEditable = parsedSelectedSections === 'all';
+  const elements = React.useMemo(() => {
+    return state.sections.map((section, index) => {
+      const isEditable = !isContainerEditable && !disabled && !readOnly;
+      return {
+        container: {
+          'data-sectionindex': index,
+          onClick: getInputContainerClickHandler(index)
+        },
+        content: {
+          tabIndex: isContainerEditable ? undefined : 0,
+          contentEditable: !isContainerEditable && !disabled && !readOnly,
+          role: 'spinbutton',
+          id: `${id}-${section.type}`,
+          'aria-labelledby': `${id}-${section.type}`,
+          'aria-readonly': readOnly,
+          'aria-valuenow': getSectionValueNow(section, utils),
+          'aria-valuemin': sectionBoundaries[section.type].minimum,
+          'aria-valuemax': sectionBoundaries[section.type].maximum,
+          'aria-valuetext': section.value ? getSectionValueText(section, utils) : localeText.empty,
+          'aria-label': localeText[section.type],
+          'aria-disabled': disabled,
+          spellCheck: isEditable ? false : undefined,
+          autoCapitalize: isEditable ? 'off' : undefined,
+          autoCorrect: isEditable ? 'off' : undefined,
+          [parseInt(React.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable ? 'next' : undefined,
+          children: section.value || section.placeholder,
+          onInput: handleInputContentInput,
+          onPaste: handleInputContentPaste,
+          onFocus: getInputContentFocusHandler(index),
+          onDragOver: handleInputContentDragOver,
+          onMouseUp: handleInputContentMouseUp,
+          inputMode: section.contentType === 'letter' ? 'text' : 'numeric'
+        },
+        before: {
+          children: section.startSeparator
+        },
+        after: {
+          children: section.endSeparator
+        }
+      };
+    });
+  }, [state.sections, getInputContentFocusHandler, handleInputContentPaste, handleInputContentDragOver, handleInputContentInput, getInputContainerClickHandler, handleInputContentMouseUp, disabled, readOnly, isContainerEditable, localeText, utils, sectionBoundaries, id]);
+  const handleValueStrChange = useEventCallback(event => {
+    updateValueFromValueStr(event.target.value);
+  });
+  const valueStr = React.useMemo(() => areAllSectionsEmpty ? '' : fieldValueManager.getV7HiddenInputValueFromSections(state.sections), [areAllSectionsEmpty, state.sections, fieldValueManager]);
+  React.useEffect(() => {
+    if (sectionListRef.current == null) {
+      throw new Error(['MUI X: The `sectionListRef` prop has not been initialized by `PickersSectionList`', 'You probably tried to pass a component to the `textField` slot that contains an `<input />` element instead of a `PickersSectionList`.', '', 'If you want to keep using an `<input />` HTML element for the editing, please remove the `enableAccessibleFieldDOMStructure` prop from your picker or field component:', '', '<DatePicker slots={{ textField: MyCustomTextField }} />', '', 'Learn more about the field accessible DOM structure on the MUI documentation: https://next.mui.com/x/react-date-pickers/fields/#fields-to-edit-a-single-element'].join('\n'));
+    }
+    if (autoFocus && sectionListRef.current) {
+      sectionListRef.current.getSectionContent(sectionOrder.startIndex).focus();
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return {
+    interactions,
+    returnedValue: {
+      // Forwarded
+      autoFocus,
+      readOnly,
+      focused: focusedProp ?? focused,
+      sectionListRef: handleSectionListRef,
+      onBlur: handleContainerBlur,
+      onClick: handleContainerClick,
+      onFocus: handleContainerFocus,
+      onInput: handleContainerInput,
+      onPaste: handleContainerPaste,
+      // Additional
+      enableAccessibleFieldDOMStructure: true,
+      elements,
+      // TODO v7: Try to set to undefined when there is a section selected.
+      tabIndex: 0,
+      contentEditable: isContainerEditable,
+      value: valueStr,
+      onChange: handleValueStrChange,
+      areAllSectionsEmpty
+    }
+  };
+};

package/modern/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -32,6 +32,9 @@ export const useMobilePicker = _ref => {
     sx,
     format,
     formatDensity,
+    enableAccessibleFieldDOMStructure,
+    selectedSections,
+    onSelectedSectionsChange,
     timezone,
     name,
     label,
@@ -41,7 +44,7 @@ export const useMobilePicker = _ref => {
     localeText
   } = props;
   const utils = useUtils();
-  const internalInputRef = React.useRef(null);
+  const fieldRef = React.useRef(null);
   const labelId = useId();
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
@@ -52,7 +55,7 @@ export const useMobilePicker = _ref => {
     fieldProps: pickerFieldProps
   } = usePicker(_extends({}, pickerParams, {
     props,
-    inputRef: internalInputRef,
+    fieldRef,
     autoFocusView: true,
     additionalViewProps: {},
     wrapperVariant: 'mobile'
@@ -73,10 +76,15 @@ export const useMobilePicker = _ref => {
       sx,
       format,
       formatDensity,
+      enableAccessibleFieldDOMStructure,
+      selectedSections,
+      onSelectedSectionsChange,
       timezone,
       label,
       name
-    }),
+    }, inputRef ? {
+      inputRef
+    } : {}),
     ownerState: props
   });
 
@@ -88,7 +96,6 @@ export const useMobilePicker = _ref => {
     textField: slots.textField
   }, fieldProps.slots);
   const Layout = slots.layout ?? PickersLayout;
-  const handleInputRef = useForkRef(internalInputRef, fieldProps.inputRef, inputRef);
   let labelledById = labelId;
   if (isToolbarHidden) {
     if (label) {
@@ -105,12 +112,13 @@ export const useMobilePicker = _ref => {
       'aria-labelledby': labelledById
     }, innerSlotProps?.mobilePaper)
   });
+  const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
   const renderPicker = () => /*#__PURE__*/_jsxs(LocalizationProvider, {
     localeText: localeText,
     children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
       slots: slotsForField,
       slotProps: slotProps,
-      inputRef: handleInputRef
+      unstableFieldRef: handleFieldRef
     })), /*#__PURE__*/_jsx(PickersModalDialog, _extends({}, actions, {
       open: open,
       slots: slots,

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

@@ -8,11 +8,11 @@ export const usePicker = ({
   valueManager,
   valueType,
   wrapperVariant,
-  inputRef,
   additionalViewProps,
   validator,
   autoFocusView,
-  rendererInterceptor
+  rendererInterceptor,
+  fieldRef
 }) => {
   if (process.env.NODE_ENV !== 'production') {
     if (props.renderInput != null) {
@@ -28,9 +28,9 @@ export const usePicker = ({
   });
   const pickerViewsResponse = usePickerViews({
     props,
-    inputRef,
     additionalViewProps,
     autoFocusView,
+    fieldRef,
     propsFromPickerValue: pickerValueResponse.viewProps,
     rendererInterceptor
   });

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

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_useControlled as useControlled } from '@mui/utils';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useOpenState } from '../useOpenState';
 import { useLocalizationContext, useUtils } from '../useUtils';
@@ -123,8 +122,6 @@ export const usePickerValue = ({
     value: inValue,
     defaultValue: inDefaultValue,
     closeOnSelect = wrapperVariant === 'desktop',
-    selectedSections: selectedSectionsProp,
-    onSelectedSectionsChange,
     timezone: timezoneProp
   } = props;
   const {
@@ -151,12 +148,6 @@ export const usePickerValue = ({
 
   const utils = useUtils();
   const adapter = useLocalizationContext();
-  const [selectedSections, setSelectedSections] = useControlled({
-    controlled: selectedSectionsProp,
-    default: null,
-    name: 'usePickerValue',
-    state: 'selectedSections'
-  });
   const {
     isOpen,
     setIsOpen
@@ -297,10 +288,6 @@ export const usePickerValue = ({
     value: newValue,
     context
   }));
-  const handleFieldSelectedSectionsChange = useEventCallback(newSelectedSections => {
-    setSelectedSections(newSelectedSections);
-    onSelectedSectionsChange?.(newSelectedSections);
-  });
   const actions = {
     onClear: handleClear,
     onAccept: handleAccept,
@@ -312,17 +299,14 @@ export const usePickerValue = ({
   };
   const fieldResponse = {
     value: dateState.draft,
-    onChange: handleChangeFromField,
-    selectedSections,
-    onSelectedSectionsChange: handleFieldSelectedSectionsChange
+    onChange: handleChangeFromField
   };
   const viewValue = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
   const viewResponse = {
     value: viewValue,
     onChange: handleChange,
     onClose: handleClose,
-    open: isOpen,
-    onSelectedSectionsChange: handleFieldSelectedSectionsChange
+    open: isOpen
   };
   const isValid = testedValue => {
     const error = validator({

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

@@ -29,14 +29,13 @@ export const usePickerViews = ({
   props,
   propsFromPickerValue,
   additionalViewProps,
-  inputRef,
   autoFocusView,
-  rendererInterceptor
+  rendererInterceptor,
+  fieldRef
 }) => {
   const {
     onChange,
     open,
-    onSelectedSectionsChange,
     onClose
   } = propsFromPickerValue;
   const {
@@ -102,9 +101,8 @@ export const usePickerViews = ({
       onClose();
       setTimeout(() => {
         // focusing the input before the range selection is done
-        // calling `onSelectedSectionsChange` outside of timeout results in an inconsistent behavior between Safari And Chrome
-        inputRef?.current.focus();
-        onSelectedSectionsChange(view);
+        // calling it outside of timeout results in an inconsistent behavior between Safari And Chrome
+        fieldRef?.current?.focusField(view);
       });
     }
   }, [view]); // eslint-disable-line react-hooks/exhaustive-deps

package/modern/internals/hooks/useStaticPicker/useStaticPicker.js

@@ -44,6 +44,7 @@ export const useStaticPicker = _ref => {
   } = usePicker(_extends({}, pickerParams, {
     props,
     autoFocusView: autoFocus ?? false,
+    fieldRef: undefined,
     additionalViewProps: {},
     wrapperVariant: displayStaticWrapperAs
   }));

package/modern/internals/index.js

@@ -10,7 +10,7 @@ export { pickersPopperClasses } from './components/pickersPopperClasses';
 export { PickersToolbarButton } from './components/PickersToolbarButton';
 export { DAY_MARGIN, DIALOG_WIDTH, VIEW_HEIGHT } from './constants/dimensions';
 export { useControlledValueWithTimezone } from './hooks/useValueWithTimezone';
-export { useField, createDateStrForInputFromSections, addPositionPropertiesToSections } from './hooks/useField';
+export { useField, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from './hooks/useField';
 export { usePicker } from './hooks/usePicker';
 export { useStaticPicker } from './hooks/useStaticPicker';
 export { useLocalizationContext, useDefaultDates, useUtils, useLocaleText, useNow } from './hooks/useUtils';
@@ -23,6 +23,7 @@ export { resolveTimeViewsResponse } from './utils/date-time-utils';
 export { splitFieldInternalAndForwardedProps } from './utils/fields';
 export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './utils/utils';
+export { useDefaultizedDateField, useDefaultizedTimeField, useDefaultizedDateTimeField } from './hooks/defaultizedFieldProps';
 export { useDefaultReduceAnimations } from './hooks/useDefaultReduceAnimations';
 export { extractValidationProps } from './utils/validation/extractValidationProps';
 export { validateDate } from './utils/validation/validateDate';

package/modern/internals/utils/convertFieldResponseIntoMuiTextFieldProps.js

@@ -1,7 +1,25 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onPaste", "onKeyDown", "inputMode", "readOnly", "InputProps", "inputProps", "inputRef"];
-export const convertFieldResponseIntoMuiTextFieldProps = fieldResponse => {
+const _excluded = ["enableAccessibleFieldDOMStructure"],
+  _excluded2 = ["InputProps", "readOnly"],
+  _excluded3 = ["onPaste", "onKeyDown", "inputMode", "readOnly", "InputProps", "inputProps", "inputRef"];
+export const convertFieldResponseIntoMuiTextFieldProps = _ref => {
+  let {
+      enableAccessibleFieldDOMStructure
+    } = _ref,
+    fieldResponse = _objectWithoutPropertiesLoose(_ref, _excluded);
+  if (enableAccessibleFieldDOMStructure) {
+    const {
+        InputProps,
+        readOnly
+      } = fieldResponse,
+      other = _objectWithoutPropertiesLoose(fieldResponse, _excluded2);
+    return _extends({}, other, {
+      InputProps: _extends({}, InputProps ?? {}, {
+        readOnly
+      })
+    });
+  }
   const {
       onPaste,
       onKeyDown,
@@ -11,7 +29,7 @@ export const convertFieldResponseIntoMuiTextFieldProps = fieldResponse => {
       inputProps,
       inputRef
     } = fieldResponse,
-    other = _objectWithoutPropertiesLoose(fieldResponse, _excluded);
+    other = _objectWithoutPropertiesLoose(fieldResponse, _excluded3);
   return _extends({}, other, {
     InputProps: _extends({}, InputProps ?? {}, {
       readOnly

package/modern/internals/utils/fields.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from './validation/extractValidationProps';
-const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'readOnly', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef'];
+const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef', 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly'];
 export const splitFieldInternalAndForwardedProps = (props, valueType) => {
   const forwardedProps = _extends({}, props);
   const internalProps = {};

package/modern/internals/utils/valueManagers.js

@@ -2,7 +2,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["value", "referenceDate"];
 import { areDatesEqual, getTodayDate, replaceInvalidDateByNull } from './date-utils';
 import { getDefaultReferenceDate } from './getDefaultReferenceDate';
-import { addPositionPropertiesToSections, createDateStrForInputFromSections } from '../hooks/useField/useField.utils';
+import { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from '../hooks/useField/useField.utils';
 export const singleItemValueManager = {
   emptyValue: null,
   getTodayValue: getTodayDate,
@@ -30,14 +30,15 @@ export const singleItemValueManager = {
 };
 export const singleItemFieldValueManager = {
   updateReferenceValue: (utils, value, prevReferenceValue) => value == null || !utils.isValid(value) ? prevReferenceValue : value,
-  getSectionsFromValue: (utils, date, prevSections, localizedDigits, isRTL, getSectionsFromDate) => {
+  getSectionsFromValue: (utils, date, prevSections, getSectionsFromDate) => {
     const shouldReUsePrevDateSections = !utils.isValid(date) && !!prevSections;
     if (shouldReUsePrevDateSections) {
       return prevSections;
     }
-    return addPositionPropertiesToSections(getSectionsFromDate(date), localizedDigits, isRTL);
+    return getSectionsFromDate(date);
   },
-  getValueStrFromSections: createDateStrForInputFromSections,
+  getV7HiddenInputValueFromSections: createDateStrForV7HiddenInputFromSections,
+  getV6InputValueFromSections: createDateStrForV6InputFromSections,
   getActiveDateManager: (utils, state) => ({
     date: state.value,
     referenceDate: state.referenceValue,