@mui/x-date-pickers 7.0.0-alpha.4 → 7.0.0-alpha.6

package/modern/internals/components/PickersInput/PickersStandardInput.js

@@ -0,0 +1,123 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["label", "autoFocus", "ownerState"];
+import * as React from 'react';
+import { useFormControl } from '@mui/material/FormControl';
+import { styled } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
+import { pickersStandardInputClasses, getPickersStandardInputUtilityClass } from './pickersInputClasses';
+import { PickersInputRoot, PickersInput } from './PickersInput';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StandardInputRoot = styled(PickersInputRoot, {
+  name: 'MuiPickersStandardInput',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme,
+  ownerState
+}) => {
+  const light = theme.palette.mode === 'light';
+  let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
+  if (theme.vars) {
+    bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`;
+  }
+  return _extends({
+    'label + &': {
+      marginTop: 16
+    }
+  }, !ownerState.disableUnderline && {
+    '&:after': {
+      background: 'red',
+      borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
+      left: 0,
+      bottom: 0,
+      // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+      content: '""',
+      position: 'absolute',
+      right: 0,
+      transform: 'scaleX(0)',
+      transition: theme.transitions.create('transform', {
+        duration: theme.transitions.duration.shorter,
+        easing: theme.transitions.easing.easeOut
+      }),
+      pointerEvents: 'none' // Transparent to the hover style.
+    },
+    [`&.${pickersStandardInputClasses.focused}:after`]: {
+      // translateX(0) is a workaround for Safari transform scale bug
+      // See https://github.com/mui/material-ui/issues/31766
+      transform: 'scaleX(1) translateX(0)'
+    },
+    [`&.${pickersStandardInputClasses.error}`]: {
+      '&:before, &:after': {
+        borderBottomColor: (theme.vars || theme).palette.error.main
+      }
+    },
+    '&:before': {
+      borderBottom: `1px solid ${bottomLineColor}`,
+      left: 0,
+      bottom: 0,
+      // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+      content: '"\\00a0"',
+      position: 'absolute',
+      right: 0,
+      transition: theme.transitions.create('border-bottom-color', {
+        duration: theme.transitions.duration.shorter
+      }),
+      pointerEvents: 'none' // Transparent to the hover style.
+    },
+    [`&:hover:not(.${pickersStandardInputClasses.disabled}, .${pickersStandardInputClasses.error}):before`]: {
+      borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        borderBottom: `1px solid ${bottomLineColor}`
+      }
+    },
+    [`&.${pickersStandardInputClasses.disabled}:before`]: {
+      borderBottomStyle: 'dotted'
+    }
+  });
+});
+const useUtilityClasses = ownerState => {
+  const {
+    focused,
+    disabled,
+    error,
+    classes,
+    fullWidth,
+    color,
+    size,
+    endAdornment,
+    startAdornment
+  } = ownerState;
+  const slots = {
+    root: ['root', focused && !disabled && 'focused', disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', `color${capitalize(color)}`, size === 'small' && 'inputSizeSmall', Boolean(startAdornment) && 'adornedStart', Boolean(endAdornment) && 'adornedEnd'],
+    notchedOutline: ['notchedOutline'],
+    before: ['before'],
+    after: ['after'],
+    content: ['content'],
+    input: ['input']
+  };
+  return composeClasses(slots, getPickersStandardInputUtilityClass, classes);
+};
+export const PickersStandardInput = /*#__PURE__*/React.forwardRef(function PickersStandardInput(props, ref) {
+  const {
+      label,
+      ownerState: ownerStateProp
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const muiFormControl = useFormControl();
+  const ownerState = _extends({}, props, ownerStateProp, muiFormControl, {
+    color: muiFormControl?.color || 'primary'
+  });
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(PickersInput, _extends({
+    slots: {
+      root: StandardInputRoot
+    }
+  }, other, {
+    label: label,
+    classes: classes,
+    ref: ref
+  }));
+});
+PickersInput.muiName = 'Input';

package/modern/internals/components/PickersInput/index.js

@@ -0,0 +1,3 @@
+export { PickersInput } from './PickersInput';
+export { PickersInputProps } from './PickersInput.types';
+export { pickersInputClasses, getPickersInputUtilityClass } from './pickersInputClasses';

package/modern/internals/components/PickersInput/pickersInputClasses.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+export function getPickersInputUtilityClass(slot) {
+  return generateUtilityClass('MuiPickersInput', slot);
+}
+export function getPickersOutlinedInputUtilityClass(slot) {
+  return generateUtilityClass('MuiPickersOutlinedInput', slot);
+}
+export function getPickersFilledInputUtilityClass(slot) {
+  return generateUtilityClass('MuiPickersFilledInput', slot);
+}
+export function getPickersStandardInputUtilityClass(slot) {
+  return generateUtilityClass('MuiPickersStandardInput', slot);
+}
+export const pickersInputClasses = generateUtilityClasses('MuiPickersInput', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'sectionContent', 'sectionBefore', 'sectionAfter', 'adornedStart', 'adornedEnd', 'input']);
+export const pickersOutlinedInputClasses = _extends({}, pickersInputClasses, generateUtilityClasses('MuiPickersOutlinedInput', ['root', 'notchedOutline', 'input']));
+export const pickersFilledInputClasses = _extends({}, pickersInputClasses, generateUtilityClasses('MuiPickersFilledInput', ['root', 'underline', 'input']));
+export const pickersStandardInputClasses = _extends({}, pickersInputClasses, generateUtilityClasses('MuiPickersStandardInput', ['root', 'underline', 'input']));

package/modern/internals/components/PickersTextField/PickersTextField.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onFocus", "onBlur", "className", "color", "disabled", "error", "required", "variant", "InputProps", "inputProps", "inputRef", "sectionsContainerRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
+const _excluded = ["onFocus", "onBlur", "className", "color", "disabled", "error", "variant", "required", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
@@ -10,9 +10,16 @@ import InputLabel from '@mui/material/InputLabel';
 import FormHelperText from '@mui/material/FormHelperText';
 import FormControl from '@mui/material/FormControl';
 import { getPickersTextFieldUtilityClass } from './pickersTextFieldClasses';
-import { PickersInput } from './PickersInput';
+import { PickersOutlinedInput } from '../PickersInput/PickersOutlinedInput';
+import { PickersFilledInput } from '../PickersInput/PickersFilledInput';
+import { PickersStandardInput } from '../PickersInput/PickersStandardInput';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const VARIANT_COMPONENT = {
+  standard: PickersStandardInput,
+  filled: PickersFilledInput,
+  outlined: PickersOutlinedInput
+};
 const PickersTextFieldRoot = styled(FormControl, {
   name: 'MuiPickersTextField',
   slot: 'Root',
@@ -39,13 +46,13 @@ export const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTe
       color = 'primary',
       disabled = false,
       error = false,
-      required = false,
       variant = 'outlined',
+      required = false,
       // Props used by PickersInput
       InputProps,
       inputProps,
       inputRef,
-      sectionsContainerRef,
+      sectionListRef,
       elements,
       areAllSectionsEmpty,
       onClick,
@@ -83,6 +90,7 @@ export const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTe
     variant
   });
   const classes = useUtilityClasses(ownerState);
+  const PickersInputComponent = VARIANT_COMPONENT[variant];
   return /*#__PURE__*/_jsxs(PickersTextFieldRoot, _extends({
     className: clsx(classes.root, className),
     ref: handleRootRef,
@@ -93,6 +101,7 @@ export const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTe
     variant: variant,
     error: error,
     color: color,
+    fullWidth: fullWidth,
     required: required,
     ownerState: ownerState
   }, other, {
@@ -101,7 +110,7 @@ export const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTe
       id: inputLabelId
     }, InputLabelProps, {
       children: label
-    })), /*#__PURE__*/_jsx(PickersInput, _extends({
+    })), /*#__PURE__*/_jsx(PickersInputComponent, _extends({
       elements: elements,
       areAllSectionsEmpty: areAllSectionsEmpty,
       onClick: onClick,
@@ -118,7 +127,7 @@ export const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTe
       fullWidth: fullWidth,
       inputProps: inputProps,
       inputRef: inputRef,
-      sectionsContainerRef: sectionsContainerRef,
+      sectionListRef: sectionListRef,
       label: label
     }, InputProps)), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
       id: helperTextId

package/modern/internals/components/PickersTextField/pickersTextFieldClasses.js

@@ -1,9 +1,6 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getPickersTextFieldUtilityClass(slot) {
   return generateUtilityClass('MuiPickersTextField', slot);
 }
-export const pickersTextFieldClasses = generateUtilityClasses('MuiPickersTextField', ['root', 'focused', 'disabled', 'error', 'required']);
-export function getPickersInputUtilityClass(slot) {
-  return generateUtilityClass('MuiPickersInput', slot);
-}
-export const pickersInputClasses = generateUtilityClasses('MuiPickersInput', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'adornedStart', 'adornedEnd', 'input', 'sectionsContainer', 'sectionContent', 'sectionBefore', 'sectionAfter']);
+export const pickersTextFieldClasses = generateUtilityClasses('MuiPickersTextField', ['root', 'focused', 'disabled', 'error', 'required']);

package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -36,6 +36,7 @@ export const useDesktopPicker = _ref => {
     format,
     formatDensity,
     timezone,
+    name,
     label,
     inputRef,
     readOnly,
@@ -103,6 +104,7 @@ export const useDesktopPicker = _ref => {
       formatDensity,
       timezone,
       label,
+      name,
       autoFocus: autoFocus && !props.open,
       focused: open ? true : undefined
     }),

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onClick", "onKeyDown", "onFocus", "onBlur", "onMouseUp", "onPaste", "error", "clearable", "onClear", "disabled"];
+const _excluded = ["inputRef", "onClick", "onKeyDown", "onFocus", "onBlur", "onMouseUp", "onPaste", "error", "clearable", "onClear", "disabled"];
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -28,7 +28,6 @@ export const useField = params => {
     timezone
   } = useFieldState(params);
   const {
-      inputRef: inputRefProp,
       internalProps,
       internalProps: {
         readOnly = false,
@@ -36,6 +35,7 @@ export const useField = params => {
         minutesStep
       },
       forwardedProps: {
+        inputRef: inputRefProp,
         onClick,
         onKeyDown,
         onFocus,
@@ -142,7 +142,14 @@ export const useField = params => {
       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) {
-        // Early return to let the paste update section, value
+        resetCharacterQuery();
+        updateSectionValue({
+          activeSection,
+          newSectionValue: pastedValue,
+          shouldGoToNextSection: true
+        });
+        // prevent default to avoid the input change handler being called
+        event.preventDefault();
         return;
       }
       if (lettersOnly || digitsOnly) {
@@ -427,7 +434,7 @@ export const useField = params => {
     onMouseUp: handleInputMouseUp,
     onClear: handleClearValue,
     error: inputError,
-    ref: handleRef,
+    inputRef: handleRef,
     clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled)
   });
 };

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

@@ -192,7 +192,7 @@ export const addPositionPropertiesToSections = (sections, isRTL) => {
 
     // The ...InInput values consider the unicode characters but do include them in their indexes
     const cleanedValue = cleanString(renderedValue);
-    const startInInput = positionInInput + renderedValue.indexOf(cleanedValue[0]) + section.startSeparator.length;
+    const startInInput = positionInInput + (cleanedValue === '' ? 0 : renderedValue.indexOf(cleanedValue[0])) + section.startSeparator.length;
     const endInInput = startInInput + cleanedValue.length;
     newSections.push(_extends({}, section, {
       start: position,
@@ -425,6 +425,21 @@ export const splitFormatIntoSections = (utils, timezone, localeText, format, dat
     }
   }
   commitToken(currentTokenValue);
+  if (sections.length === 0 && startSeparator.length > 0) {
+    sections.push({
+      type: 'empty',
+      contentType: 'letter',
+      maxLength: null,
+      format: '',
+      value: '',
+      placeholder: '',
+      hasLeadingZerosInFormat: false,
+      hasLeadingZerosInInput: false,
+      startSeparator,
+      endSeparator: '',
+      modified: false
+    });
+  }
   return sections.map(section => {
     const cleanSeparator = separator => {
       let cleanedSeparator = separator;
@@ -566,6 +581,10 @@ export const getSectionsBoundaries = (utils, timezone) => {
     meridiem: () => ({
       minimum: 0,
       maximum: 0
+    }),
+    empty: () => ({
+      minimum: 0,
+      maximum: 0
     })
   };
 };
@@ -573,7 +592,7 @@ let warnedOnceInvalidSection = false;
 export const validateSections = (sections, valueType) => {
   if (process.env.NODE_ENV !== 'production') {
     if (!warnedOnceInvalidSection) {
-      const supportedSections = [];
+      const supportedSections = ['empty'];
       if (['date', 'date-time'].includes(valueType)) {
         supportedSections.push('weekDay', 'day', 'month', 'year');
       }
@@ -582,7 +601,7 @@ export const validateSections = (sections, valueType) => {
       }
       const invalidSection = sections.find(section => !supportedSections.includes(section.type));
       if (invalidSection) {
-        console.warn(`MUI: The field component you are using is not compatible with the "${invalidSection.type} date section.`, `The supported date sections are ["${supportedSections.join('", "')}"]\`.`);
+        console.warn(`MUI: The field component you are using is not compatible with the "${invalidSection.type}" date section.`, `The supported date sections are ["${supportedSections.join('", "')}"]\`.`);
         warnedOnceInvalidSection = true;
       }
     }
@@ -649,7 +668,8 @@ const reliableSectionModificationOrder = {
   hours: 5,
   minutes: 6,
   seconds: 7,
-  meridiem: 8
+  meridiem: 8,
+  empty: 9
 };
 export const mergeDateIntoReferenceDate = (utils, timezone, dateToTransferFrom, sections, referenceDate, shouldLimitToEditedSections) =>
 // cloning sections before sort to avoid mutating it

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

@@ -94,17 +94,21 @@ export const useFieldState = params => {
     if (typeof selectedSections === 'number') {
       return {
         startIndex: selectedSections,
-        endIndex: selectedSections
+        endIndex: selectedSections,
+        shouldSelectBoundarySelectors: state.sections[selectedSections].type === 'empty'
       };
     }
     if (typeof selectedSections === 'string') {
       const selectedSectionIndex = state.sections.findIndex(section => section.type === selectedSections);
       return {
         startIndex: selectedSectionIndex,
-        endIndex: selectedSectionIndex
+        endIndex: selectedSectionIndex,
+        shouldSelectBoundarySelectors: state.sections[selectedSectionIndex].type === 'empty'
       };
     }
-    return selectedSections;
+    return _extends({}, selectedSections, {
+      shouldSelectBoundarySelectors: selectedSections.startIndex === selectedSections.endIndex && state.sections[selectedSections.startIndex].type === 'empty'
+    });
   }, [selectedSections, state.sections]);
   const publishValue = ({
     value,

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

@@ -33,6 +33,7 @@ export const useMobilePicker = _ref => {
     format,
     formatDensity,
     timezone,
+    name,
     label,
     inputRef,
     readOnly,
@@ -73,7 +74,8 @@ export const useMobilePicker = _ref => {
       format,
       formatDensity,
       timezone,
-      label
+      label,
+      name
     }),
     ownerState: props
   });

package/modern/internals/index.js

@@ -16,6 +16,7 @@ export { useStaticPicker } from './hooks/useStaticPicker';
 export { useLocalizationContext, useDefaultDates, useUtils, useLocaleText, useNow } from './hooks/useUtils';
 export { useValidation } from './hooks/useValidation';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
+export { convertFieldResponseIntoMuiTextFieldProps } from './utils/convertFieldResponseIntoMuiTextFieldProps';
 export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate } from './utils/date-utils';
 export { splitFieldInternalAndForwardedProps } from './utils/fields';
 export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';

package/modern/internals/utils/convertFieldResponseIntoMuiTextFieldProps.js

@@ -0,0 +1,26 @@
+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 {
+      onPaste,
+      onKeyDown,
+      inputMode,
+      readOnly,
+      InputProps,
+      inputProps,
+      inputRef
+    } = fieldResponse,
+    other = _objectWithoutPropertiesLoose(fieldResponse, _excluded);
+  return _extends({}, other, {
+    InputProps: _extends({}, InputProps ?? {}, {
+      readOnly
+    }),
+    inputProps: _extends({}, inputProps ?? {}, {
+      inputMode,
+      onPaste,
+      onKeyDown,
+      ref: inputRef
+    })
+  });
+};

package/modern/locales/ruRU.js

@@ -42,8 +42,7 @@ const ruRUPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Выберите дату, выбрана дата ${utils.format(value, 'fullDate')}` : 'Выберите дату',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Выберите время, выбрано время ${utils.format(value, 'fullTime')}` : 'Выберите время',
-  // fieldClearLabel: 'Clear value',
-
+  fieldClearLabel: 'Очистить значение',
   // Table labels
   timeTableLabel: 'выбрать время',
   dateTableLabel: 'выбрать дату',

package/node/DateField/DateField.js

@@ -13,12 +13,11 @@ var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/base/utils");
 var _utils2 = require("@mui/utils");
-var _useDateField2 = require("./useDateField");
+var _useDateField = require("./useDateField");
 var _hooks = require("../hooks");
+var _convertFieldResponseIntoMuiTextFieldProps = require("../internals/utils/convertFieldResponseIntoMuiTextFieldProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "InputProps", "inputProps"],
-  _excluded2 = ["inputRef"],
-  _excluded3 = ["ref", "onPaste", "onKeyDown", "inputMode", "readOnly", "clearable", "onClear"];
+const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -31,7 +30,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  *
  * - [DateField API](https://mui.com/x/api/date-pickers/date-field/)
  */
-const DateField = exports.DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref) {
+const DateField = exports.DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, inRef) {
   const themeProps = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiDateField'
@@ -45,58 +44,26 @@ const DateField = exports.DateField = /*#__PURE__*/React.forwardRef(function Dat
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
   const ownerState = themeProps;
   const TextField = slots?.textField ?? _TextField.default;
-  const _useSlotProps = (0, _utils.useSlotProps)({
-      elementType: TextField,
-      externalSlotProps: slotProps?.textField,
-      externalForwardedProps: other,
-      ownerState
-    }),
-    {
-      inputRef: externalInputRef
-    } = _useSlotProps,
-    textFieldProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
+  const textFieldProps = (0, _utils.useSlotProps)({
+    elementType: TextField,
+    externalSlotProps: slotProps?.textField,
+    externalForwardedProps: other,
+    additionalProps: {
+      ref: inRef
+    },
+    ownerState
+  });
 
   // TODO: Remove when mui/material-ui#35088 will be merged
   textFieldProps.inputProps = (0, _extends2.default)({}, inputProps, textFieldProps.inputProps);
   textFieldProps.InputProps = (0, _extends2.default)({}, InputProps, textFieldProps.InputProps);
-  const _useDateField = (0, _useDateField2.useDateField)({
-      props: textFieldProps,
-      inputRef: externalInputRef
-    }),
-    {
-      ref: inputRef,
-      onPaste,
-      onKeyDown,
-      inputMode,
-      readOnly,
-      clearable,
-      onClear
-    } = _useDateField,
-    fieldProps = (0, _objectWithoutPropertiesLoose2.default)(_useDateField, _excluded3);
-  const {
-    InputProps: ProcessedInputProps,
-    fieldProps: processedFieldProps
-  } = (0, _hooks.useClearableField)({
-    onClear,
-    clearable,
-    fieldProps,
-    InputProps: fieldProps.InputProps,
+  const fieldResponse = (0, _useDateField.useDateField)(textFieldProps);
+  const convertedFieldResponse = (0, _convertFieldResponseIntoMuiTextFieldProps.convertFieldResponseIntoMuiTextFieldProps)(fieldResponse);
+  const processedFieldProps = (0, _hooks.useClearableField)((0, _extends2.default)({}, convertedFieldResponse, {
     slots,
     slotProps
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({
-    ref: ref
-  }, processedFieldProps, {
-    InputProps: (0, _extends2.default)({}, ProcessedInputProps, {
-      readOnly
-    }),
-    inputProps: (0, _extends2.default)({}, fieldProps.inputProps, {
-      inputMode,
-      onPaste,
-      onKeyDown,
-      ref: inputRef
-    })
   }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({}, processedFieldProps));
 });
 process.env.NODE_ENV !== "production" ? DateField.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -274,7 +241,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number, _propTypes.default.shape({
+  selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number, _propTypes.default.shape({
     endIndex: _propTypes.default.number.isRequired,
     startIndex: _propTypes.default.number.isRequired
   })]),

package/node/DateField/useDateField.js

@@ -23,17 +23,13 @@ const useDefaultizedDateField = props => {
     maxDate: (0, _dateUtils.applyDefaultDate)(utils, props.maxDate, defaultDates.maxDate)
   });
 };
-const useDateField = ({
-  props: inProps,
-  inputRef
-}) => {
+const useDateField = inProps => {
   const props = useDefaultizedDateField(inProps);
   const {
     forwardedProps,
     internalProps
   } = (0, _fields.splitFieldInternalAndForwardedProps)(props, 'date');
   return (0, _useField.useField)({
-    inputRef,
     forwardedProps,
     internalProps,
     valueManager: _valueManagers.singleItemValueManager,

package/node/DatePicker/DatePicker.js

@@ -169,6 +169,10 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: _propTypes.default.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: _propTypes.default.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
@@ -267,7 +271,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number, _propTypes.default.shape({
+  selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number, _propTypes.default.shape({
     endIndex: _propTypes.default.number.isRequired,
     startIndex: _propTypes.default.number.isRequired
   })]),