@mui/x-date-pickers 8.11.1 → 8.11.3

package/esm/internals/components/PickerFieldUI.js

@@ -17,6 +17,7 @@ import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import MuiTextField from '@mui/material/TextField';
 import MuiIconButton from '@mui/material/IconButton';
 import MuiInputAdornment from '@mui/material/InputAdornment';
+import { major as materialMajor } from '@mui/material/version';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { useFieldOwnerState } from "../hooks/useFieldOwnerState.js";
 import { usePickerTranslations } from "../../hooks/index.js";
@@ -24,6 +25,7 @@ import { ClearIcon as MuiClearIcon } from "../../icons/index.js";
 import { useNullablePickerContext } from "../hooks/useNullablePickerContext.js";
 import { PickersTextField } from "../../PickersTextField/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const noop = () => {};
 export const cleanFieldResponse = _ref => {
   let {
       enableAccessibleFieldDOMStructure
@@ -40,13 +42,20 @@ export const cleanFieldResponse = _ref => {
         openPickerAriaLabel
       } = fieldResponse,
       other = _objectWithoutPropertiesLoose(fieldResponse, _excluded2);
+    const mergedInputProps = materialMajor >= 6 && other?.slotProps?.input ? mergeSlotProps(other?.slotProps?.input, InputProps) : noop;
     return {
       clearable,
       onClear,
       clearButtonPosition,
       openPickerButtonPosition,
       openPickerAriaLabel,
-      textFieldProps: _extends({}, other, {
+      textFieldProps: _extends({}, other, materialMajor >= 6 && other?.slotProps?.input ? {
+        slotProps: _extends({}, other?.slotProps, {
+          input: ownerState => _extends({}, resolveComponentProps(mergedInputProps, ownerState), {
+            readOnly
+          })
+        })
+      } : {
         InputProps: _extends({}, InputProps ?? {}, {
           readOnly
         })
@@ -68,13 +77,27 @@ export const cleanFieldResponse = _ref => {
       openPickerAriaLabel
     } = fieldResponse,
     other = _objectWithoutPropertiesLoose(fieldResponse, _excluded3);
+  const mergedInputProps = materialMajor >= 6 && other?.slotProps?.input ? mergeSlotProps(other?.slotProps?.input, InputProps) : noop;
+  const mergedHtmlInputProps = materialMajor >= 6 && other?.slotProps?.htmlInput ? mergeSlotProps(other?.slotProps?.htmlInput, inputProps) : noop;
   return {
     clearable,
     onClear,
     clearButtonPosition,
     openPickerButtonPosition,
     openPickerAriaLabel,
-    textFieldProps: _extends({}, other, {
+    textFieldProps: _extends({}, other, materialMajor >= 6 && (other?.slotProps?.input || other?.slotProps?.htmlInput) ? {
+      slotProps: _extends({}, other?.slotProps, {
+        input: ownerState => _extends({}, resolveComponentProps(mergedInputProps, ownerState), {
+          readOnly
+        }),
+        htmlInput: ownerState => _extends({}, resolveComponentProps(mergedHtmlInputProps, ownerState), {
+          inputMode,
+          onPaste,
+          onKeyDown,
+          ref: inputRef
+        })
+      })
+    } : {
       InputProps: _extends({}, InputProps ?? {}, {
         readOnly
       }),
@@ -100,8 +123,6 @@ export const PickerFieldUIContext = /*#__PURE__*/React.createContext({
 if (process.env.NODE_ENV !== "production") PickerFieldUIContext.displayName = "PickerFieldUIContext";
 export function PickerFieldUI(props) {
   const {
-    slots,
-    slotProps,
     fieldResponse,
     defaultOpenPickerIcon
   } = props;
@@ -124,11 +145,11 @@ export function PickerFieldUI(props) {
   const triggerStatus = pickerContext ? pickerContext.triggerStatus : 'hidden';
   const clearButtonPosition = clearable ? clearButtonPositionProp : null;
   const openPickerButtonPosition = triggerStatus !== 'hidden' ? openPickerButtonPositionProp : null;
-  const TextField = slots?.textField ?? pickerFieldUIContext.slots.textField ?? (fieldResponse.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
-  const InputAdornment = slots?.inputAdornment ?? pickerFieldUIContext.slots.inputAdornment ?? MuiInputAdornment;
+  const TextField = pickerFieldUIContext.slots.textField ?? (fieldResponse.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
+  const InputAdornment = pickerFieldUIContext.slots.inputAdornment ?? MuiInputAdornment;
   const _useSlotProps = useSlotProps({
       elementType: InputAdornment,
-      externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.inputAdornment, slotProps?.inputAdornment),
+      externalSlotProps: pickerFieldUIContext.slotProps.inputAdornment,
       additionalProps: {
         position: 'start'
       },
@@ -139,7 +160,7 @@ export function PickerFieldUI(props) {
     startInputAdornmentProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded4);
   const _useSlotProps2 = useSlotProps({
       elementType: InputAdornment,
-      externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.inputAdornment, slotProps?.inputAdornment),
+      externalSlotProps: pickerFieldUIContext.slotProps.inputAdornment,
       additionalProps: {
         position: 'end'
       },
@@ -170,11 +191,11 @@ export function PickerFieldUI(props) {
     externalSlotProps: pickerFieldUIContext.slotProps.openPickerIcon,
     ownerState
   });
-  const ClearButton = slots?.clearButton ?? pickerFieldUIContext.slots.clearButton ?? MuiIconButton;
+  const ClearButton = pickerFieldUIContext.slots.clearButton ?? MuiIconButton;
   // We don't want to forward the `ownerState` to the `<IconButton />` component, see mui/material-ui#34056
   const _useSlotProps4 = useSlotProps({
       elementType: ClearButton,
-      externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.clearButton, slotProps?.clearButton),
+      externalSlotProps: pickerFieldUIContext.slotProps.clearButton,
       className: 'clearButton',
       additionalProps: {
         title: translations.fieldClearLabel,
@@ -188,24 +209,23 @@ export function PickerFieldUI(props) {
       ownerState
     }),
     clearButtonProps = _objectWithoutPropertiesLoose(_useSlotProps4, _excluded7);
-  const ClearIcon = slots?.clearIcon ?? pickerFieldUIContext.slots.clearIcon ?? MuiClearIcon;
+  const ClearIcon = pickerFieldUIContext.slots.clearIcon ?? MuiClearIcon;
   const clearIconProps = useSlotProps({
     elementType: ClearIcon,
-    externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.clearIcon, slotProps?.clearIcon),
+    externalSlotProps: pickerFieldUIContext.slotProps.clearIcon,
     additionalProps: {
       fontSize: 'small'
     },
     ownerState
   });
   textFieldProps.ref = useForkRef(textFieldProps.ref, pickerContext?.rootRef);
-  if (!textFieldProps.InputProps) {
-    textFieldProps.InputProps = {};
-  }
+  const additionalTextFieldInputProps = {};
+  const textFieldInputProps = resolveComponentProps((materialMajor >= 6 && textFieldProps?.slotProps?.input) ?? textFieldProps.InputProps, ownerState);
   if (pickerContext) {
-    textFieldProps.InputProps.ref = pickerContext.triggerRef;
+    additionalTextFieldInputProps.ref = pickerContext.triggerRef;
   }
-  if (!textFieldProps.InputProps?.startAdornment && (clearButtonPosition === 'start' || openPickerButtonPosition === 'start')) {
-    textFieldProps.InputProps.startAdornment = /*#__PURE__*/_jsxs(InputAdornment, _extends({}, startInputAdornmentProps, {
+  if (!textFieldInputProps?.startAdornment && (clearButtonPosition === 'start' || openPickerButtonPosition === 'start')) {
+    additionalTextFieldInputProps.startAdornment = /*#__PURE__*/_jsxs(InputAdornment, _extends({}, startInputAdornmentProps, {
       children: [openPickerButtonPosition === 'start' && /*#__PURE__*/_jsx(OpenPickerButton, _extends({}, openPickerButtonProps, {
         children: /*#__PURE__*/_jsx(OpenPickerIcon, _extends({}, openPickerIconProps))
       })), clearButtonPosition === 'start' && /*#__PURE__*/_jsx(ClearButton, _extends({}, clearButtonProps, {
@@ -213,8 +233,8 @@ export function PickerFieldUI(props) {
       }))]
     }));
   }
-  if (!textFieldProps.InputProps?.endAdornment && (clearButtonPosition === 'end' || openPickerButtonPosition === 'end')) {
-    textFieldProps.InputProps.endAdornment = /*#__PURE__*/_jsxs(InputAdornment, _extends({}, endInputAdornmentProps, {
+  if (!textFieldInputProps?.endAdornment && (clearButtonPosition === 'end' || openPickerButtonPosition === 'end')) {
+    additionalTextFieldInputProps.endAdornment = /*#__PURE__*/_jsxs(InputAdornment, _extends({}, endInputAdornmentProps, {
       children: [clearButtonPosition === 'end' && /*#__PURE__*/_jsx(ClearButton, _extends({}, clearButtonProps, {
         children: /*#__PURE__*/_jsx(ClearIcon, _extends({}, clearIconProps))
       })), openPickerButtonPosition === 'end' && /*#__PURE__*/_jsx(OpenPickerButton, _extends({}, openPickerButtonProps, {
@@ -222,6 +242,10 @@ export function PickerFieldUI(props) {
       }))]
     }));
   }
+  // handle the case of showing custom `inputAdornment` for Field components
+  if (!additionalTextFieldInputProps?.endAdornment && !additionalTextFieldInputProps?.startAdornment && pickerFieldUIContext.slots.inputAdornment) {
+    additionalTextFieldInputProps.endAdornment = /*#__PURE__*/_jsx(InputAdornment, _extends({}, endInputAdornmentProps));
+  }
   if (clearButtonPosition != null) {
     textFieldProps.sx = [{
       '& .clearButton': {
@@ -239,7 +263,18 @@ export function PickerFieldUI(props) {
       }
     }, ...(Array.isArray(textFieldProps.sx) ? textFieldProps.sx : [textFieldProps.sx])];
   }
-  return /*#__PURE__*/_jsx(TextField, _extends({}, textFieldProps));
+  const resolvedTextFieldInputProps = materialMajor >= 6 && textFieldProps?.slotProps?.input ? resolveComponentProps(mergeSlotProps(textFieldInputProps, additionalTextFieldInputProps), ownerState) : _extends({}, textFieldInputProps, additionalTextFieldInputProps);
+
+  // Remove the `input` slotProps to avoid them overriding the manually resolved `InputProps`.
+  // Relevant on `materialMajor >= 6` since `slotProps` would take precedence.
+  delete textFieldProps?.slotProps?.input;
+  if (fieldResponse.enableAccessibleFieldDOMStructure) {
+    // Remove the `slotProps` on `PickersTextField` as they are not supported.
+    delete textFieldProps?.slotProps;
+  }
+  return /*#__PURE__*/_jsx(TextField, _extends({}, textFieldProps, {
+    InputProps: resolvedTextFieldInputProps
+  }));
 }
 export function mergeSlotProps(slotPropsA, slotPropsB) {
   if (!slotPropsA) {

package/esm/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -8,7 +8,6 @@ import { PickerPopper } from "../../components/PickerPopper/PickerPopper.js";
 import { usePicker } from "../usePicker/index.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
 import { PickerProvider } from "../../components/PickerProvider.js";
-import { PickerFieldUIContextProvider } from "../../components/PickerFieldUI.js";
 import { createNonRangePickerStepNavigation } from "../../utils/createNonRangePickerStepNavigation.js";
 
 /**
@@ -75,21 +74,20 @@ export const useDesktopPicker = _ref => {
       'aria-labelledby': labelledById
     }, innerSlotProps?.popper)
   });
-  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-    children: /*#__PURE__*/_jsxs(PickerFieldUIContextProvider, {
+  const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
+    children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
       slots: slots,
       slotProps: slotProps,
-      inputRef: inputRef,
-      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps)), /*#__PURE__*/_jsx(PickerPopper, {
+      inputRef: inputRef
+    })), /*#__PURE__*/_jsx(PickerPopper, {
+      slots: slots,
+      slotProps: slotProps,
+      children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
         slots: slots,
         slotProps: slotProps,
-        children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
-          slots: slots,
-          slotProps: slotProps,
-          children: renderCurrentView()
-        }))
-      })]
-    })
+        children: renderCurrentView()
+      }))
+    })]
   }));
   if (process.env.NODE_ENV !== "production") renderPicker.displayName = "renderPicker";
   return {

package/esm/internals/hooks/useField/useFieldSectionContentProps.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import useId from '@mui/utils/useId';
 import { usePickerAdapter, usePickerTranslations } from "../../../hooks/index.js";
 import { syncSelectionToDOM } from "./syncSelectionToDOM.js";
 /**
@@ -13,7 +12,6 @@ import { syncSelectionToDOM } from "./syncSelectionToDOM.js";
 export function useFieldSectionContentProps(parameters) {
   const adapter = usePickerAdapter();
   const translations = usePickerTranslations();
-  const id = useId();
   const {
     focused,
     domGetters,
@@ -147,7 +145,6 @@ export function useFieldSectionContentProps(parameters) {
       onDragOver: handleDragOver,
       onFocus: createFocusHandler(sectionIndex),
       // Aria attributes
-      'aria-labelledby': `${id}-${section.type}`,
       'aria-readonly': readOnly,
       'aria-valuenow': getSectionValueNow(section, adapter),
       'aria-valuemin': sectionBoundaries.minimum,
@@ -159,7 +156,6 @@ export function useFieldSectionContentProps(parameters) {
       tabIndex: isContainerEditable || sectionIndex > 0 ? -1 : 0,
       contentEditable: !isContainerEditable && !disabled && !readOnly,
       role: 'spinbutton',
-      id: `${id}-${section.type}`,
       'data-range-position': section.dateName || undefined,
       spellCheck: isEditable ? false : undefined,
       autoCapitalize: isEditable ? 'off' : undefined,
@@ -167,7 +163,7 @@ export function useFieldSectionContentProps(parameters) {
       children: section.value || section.placeholder,
       inputMode: section.contentType === 'letter' ? 'text' : 'numeric'
     };
-  }, [sectionsValueBoundaries, id, isContainerEditable, disabled, readOnly, isEditable, translations, adapter, handleInput, handlePaste, handleMouseUp, handleDragOver, createFocusHandler, fieldValueManager, value]);
+  }, [sectionsValueBoundaries, isContainerEditable, disabled, readOnly, isEditable, translations, adapter, handleInput, handlePaste, handleMouseUp, handleDragOver, createFocusHandler, fieldValueManager, value]);
 }
 function getSectionValueText(section, adapter) {
   if (!section.value) {
@@ -177,13 +173,18 @@ function getSectionValueText(section, adapter) {
     case 'month':
       {
         if (section.contentType === 'digit') {
-          return adapter.format(adapter.setMonth(adapter.date(), Number(section.value) - 1), 'month');
+          const dateWithMonth = adapter.setMonth(adapter.date(), Number(section.value) - 1);
+          return adapter.isValid(dateWithMonth) ? adapter.format(dateWithMonth, 'month') : '';
         }
         const parsedDate = adapter.parse(section.value, section.format);
-        return parsedDate ? adapter.format(parsedDate, 'month') : undefined;
+        return parsedDate && adapter.isValid(parsedDate) ? adapter.format(parsedDate, 'month') : undefined;
       }
     case 'day':
-      return section.contentType === 'digit' ? adapter.format(adapter.setDate(adapter.startOfYear(adapter.date()), Number(section.value)), 'dayOfMonthFull') : section.value;
+      if (section.contentType === 'digit') {
+        const dateWithDay = adapter.setDate(adapter.startOfYear(adapter.date()), Number(section.value));
+        return adapter.isValid(dateWithDay) ? adapter.format(dateWithDay, 'dayOfMonthFull') : '';
+      }
+      return section.value;
     case 'weekDay':
       // TODO: improve by providing the label of the week day
       return undefined;

package/esm/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -8,7 +8,6 @@ import { PickersModalDialog } from "../../components/PickersModalDialog.js";
 import { usePicker } from "../usePicker/index.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
 import { PickerProvider } from "../../components/PickerProvider.js";
-import { PickerFieldUIContextProvider } from "../../components/PickerFieldUI.js";
 import { createNonRangePickerStepNavigation } from "../../utils/createNonRangePickerStepNavigation.js";
 
 /**
@@ -75,21 +74,20 @@ export const useMobilePicker = _ref => {
       'aria-labelledby': labelledById
     }, innerSlotProps?.mobilePaper)
   });
-  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-    children: /*#__PURE__*/_jsxs(PickerFieldUIContextProvider, {
+  const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
+    children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
       slots: slots,
       slotProps: slotProps,
-      inputRef: inputRef,
-      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
+      inputRef: inputRef
+    })), /*#__PURE__*/_jsx(PickersModalDialog, {
+      slots: slots,
+      slotProps: slotProps,
+      children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
         slots: slots,
         slotProps: slotProps,
-        children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
-          slots: slots,
-          slotProps: slotProps,
-          children: renderCurrentView()
-        }))
-      })]
-    })
+        children: renderCurrentView()
+      }))
+    })]
   }));
   if (process.env.NODE_ENV !== "production") renderPicker.displayName = "renderPicker";
   return {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.11.1
+ * @mui/x-date-pickers v8.11.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/PickerFieldUI.d.ts

@@ -47,16 +47,6 @@ export interface ExportedPickerFieldUIProps {
   openPickerButtonPosition?: 'start' | 'end';
 }
 export interface PickerFieldUIProps<TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>> {
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots?: PickerFieldUISlots;
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps?: PickerFieldUISlotProps;
   /**
    * Object returned by the `useField` hook or one of its wrapper (for example `useDateField`).
    */

package/internals/components/PickerFieldUI.js

@@ -21,6 +21,7 @@ var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveC
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
+var _version = require("@mui/material/version");
 var _useSlotProps5 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _useFieldOwnerState = require("../hooks/useFieldOwnerState");
 var _hooks = require("../../hooks");
@@ -36,6 +37,7 @@ const _excluded = ["enableAccessibleFieldDOMStructure"],
   _excluded6 = ["ownerState"],
   _excluded7 = ["ownerState"],
   _excluded8 = ["InputProps", "inputProps"];
+const noop = () => {};
 const cleanFieldResponse = _ref => {
   let {
       enableAccessibleFieldDOMStructure
@@ -52,13 +54,20 @@ const cleanFieldResponse = _ref => {
         openPickerAriaLabel
       } = fieldResponse,
       other = (0, _objectWithoutPropertiesLoose2.default)(fieldResponse, _excluded2);
+    const mergedInputProps = _version.major >= 6 && other?.slotProps?.input ? mergeSlotProps(other?.slotProps?.input, InputProps) : noop;
     return {
       clearable,
       onClear,
       clearButtonPosition,
       openPickerButtonPosition,
       openPickerAriaLabel,
-      textFieldProps: (0, _extends2.default)({}, other, {
+      textFieldProps: (0, _extends2.default)({}, other, _version.major >= 6 && other?.slotProps?.input ? {
+        slotProps: (0, _extends2.default)({}, other?.slotProps, {
+          input: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(mergedInputProps, ownerState), {
+            readOnly
+          })
+        })
+      } : {
         InputProps: (0, _extends2.default)({}, InputProps ?? {}, {
           readOnly
         })
@@ -80,13 +89,27 @@ const cleanFieldResponse = _ref => {
       openPickerAriaLabel
     } = fieldResponse,
     other = (0, _objectWithoutPropertiesLoose2.default)(fieldResponse, _excluded3);
+  const mergedInputProps = _version.major >= 6 && other?.slotProps?.input ? mergeSlotProps(other?.slotProps?.input, InputProps) : noop;
+  const mergedHtmlInputProps = _version.major >= 6 && other?.slotProps?.htmlInput ? mergeSlotProps(other?.slotProps?.htmlInput, inputProps) : noop;
   return {
     clearable,
     onClear,
     clearButtonPosition,
     openPickerButtonPosition,
     openPickerAriaLabel,
-    textFieldProps: (0, _extends2.default)({}, other, {
+    textFieldProps: (0, _extends2.default)({}, other, _version.major >= 6 && (other?.slotProps?.input || other?.slotProps?.htmlInput) ? {
+      slotProps: (0, _extends2.default)({}, other?.slotProps, {
+        input: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(mergedInputProps, ownerState), {
+          readOnly
+        }),
+        htmlInput: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(mergedHtmlInputProps, ownerState), {
+          inputMode,
+          onPaste,
+          onKeyDown,
+          ref: inputRef
+        })
+      })
+    } : {
       InputProps: (0, _extends2.default)({}, InputProps ?? {}, {
         readOnly
       }),
@@ -113,8 +136,6 @@ const PickerFieldUIContext = exports.PickerFieldUIContext = /*#__PURE__*/React.c
 if (process.env.NODE_ENV !== "production") PickerFieldUIContext.displayName = "PickerFieldUIContext";
 function PickerFieldUI(props) {
   const {
-    slots,
-    slotProps,
     fieldResponse,
     defaultOpenPickerIcon
   } = props;
@@ -137,11 +158,11 @@ function PickerFieldUI(props) {
   const triggerStatus = pickerContext ? pickerContext.triggerStatus : 'hidden';
   const clearButtonPosition = clearable ? clearButtonPositionProp : null;
   const openPickerButtonPosition = triggerStatus !== 'hidden' ? openPickerButtonPositionProp : null;
-  const TextField = slots?.textField ?? pickerFieldUIContext.slots.textField ?? (fieldResponse.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
-  const InputAdornment = slots?.inputAdornment ?? pickerFieldUIContext.slots.inputAdornment ?? _InputAdornment.default;
+  const TextField = pickerFieldUIContext.slots.textField ?? (fieldResponse.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
+  const InputAdornment = pickerFieldUIContext.slots.inputAdornment ?? _InputAdornment.default;
   const _useSlotProps = (0, _useSlotProps5.default)({
       elementType: InputAdornment,
-      externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.inputAdornment, slotProps?.inputAdornment),
+      externalSlotProps: pickerFieldUIContext.slotProps.inputAdornment,
       additionalProps: {
         position: 'start'
       },
@@ -152,7 +173,7 @@ function PickerFieldUI(props) {
     startInputAdornmentProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded4);
   const _useSlotProps2 = (0, _useSlotProps5.default)({
       elementType: InputAdornment,
-      externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.inputAdornment, slotProps?.inputAdornment),
+      externalSlotProps: pickerFieldUIContext.slotProps.inputAdornment,
       additionalProps: {
         position: 'end'
       },
@@ -183,11 +204,11 @@ function PickerFieldUI(props) {
     externalSlotProps: pickerFieldUIContext.slotProps.openPickerIcon,
     ownerState
   });
-  const ClearButton = slots?.clearButton ?? pickerFieldUIContext.slots.clearButton ?? _IconButton.default;
+  const ClearButton = pickerFieldUIContext.slots.clearButton ?? _IconButton.default;
   // We don't want to forward the `ownerState` to the `<IconButton />` component, see mui/material-ui#34056
   const _useSlotProps4 = (0, _useSlotProps5.default)({
       elementType: ClearButton,
-      externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.clearButton, slotProps?.clearButton),
+      externalSlotProps: pickerFieldUIContext.slotProps.clearButton,
       className: 'clearButton',
       additionalProps: {
         title: translations.fieldClearLabel,
@@ -201,24 +222,23 @@ function PickerFieldUI(props) {
       ownerState
     }),
     clearButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps4, _excluded7);
-  const ClearIcon = slots?.clearIcon ?? pickerFieldUIContext.slots.clearIcon ?? _icons.ClearIcon;
+  const ClearIcon = pickerFieldUIContext.slots.clearIcon ?? _icons.ClearIcon;
   const clearIconProps = (0, _useSlotProps5.default)({
     elementType: ClearIcon,
-    externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.clearIcon, slotProps?.clearIcon),
+    externalSlotProps: pickerFieldUIContext.slotProps.clearIcon,
     additionalProps: {
       fontSize: 'small'
     },
     ownerState
   });
   textFieldProps.ref = (0, _useForkRef.default)(textFieldProps.ref, pickerContext?.rootRef);
-  if (!textFieldProps.InputProps) {
-    textFieldProps.InputProps = {};
-  }
+  const additionalTextFieldInputProps = {};
+  const textFieldInputProps = (0, _resolveComponentProps.default)((_version.major >= 6 && textFieldProps?.slotProps?.input) ?? textFieldProps.InputProps, ownerState);
   if (pickerContext) {
-    textFieldProps.InputProps.ref = pickerContext.triggerRef;
+    additionalTextFieldInputProps.ref = pickerContext.triggerRef;
   }
-  if (!textFieldProps.InputProps?.startAdornment && (clearButtonPosition === 'start' || openPickerButtonPosition === 'start')) {
-    textFieldProps.InputProps.startAdornment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(InputAdornment, (0, _extends2.default)({}, startInputAdornmentProps, {
+  if (!textFieldInputProps?.startAdornment && (clearButtonPosition === 'start' || openPickerButtonPosition === 'start')) {
+    additionalTextFieldInputProps.startAdornment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(InputAdornment, (0, _extends2.default)({}, startInputAdornmentProps, {
       children: [openPickerButtonPosition === 'start' && /*#__PURE__*/(0, _jsxRuntime.jsx)(OpenPickerButton, (0, _extends2.default)({}, openPickerButtonProps, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OpenPickerIcon, (0, _extends2.default)({}, openPickerIconProps))
       })), clearButtonPosition === 'start' && /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearButton, (0, _extends2.default)({}, clearButtonProps, {
@@ -226,8 +246,8 @@ function PickerFieldUI(props) {
       }))]
     }));
   }
-  if (!textFieldProps.InputProps?.endAdornment && (clearButtonPosition === 'end' || openPickerButtonPosition === 'end')) {
-    textFieldProps.InputProps.endAdornment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(InputAdornment, (0, _extends2.default)({}, endInputAdornmentProps, {
+  if (!textFieldInputProps?.endAdornment && (clearButtonPosition === 'end' || openPickerButtonPosition === 'end')) {
+    additionalTextFieldInputProps.endAdornment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(InputAdornment, (0, _extends2.default)({}, endInputAdornmentProps, {
       children: [clearButtonPosition === 'end' && /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearButton, (0, _extends2.default)({}, clearButtonProps, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearIcon, (0, _extends2.default)({}, clearIconProps))
       })), openPickerButtonPosition === 'end' && /*#__PURE__*/(0, _jsxRuntime.jsx)(OpenPickerButton, (0, _extends2.default)({}, openPickerButtonProps, {
@@ -235,6 +255,10 @@ function PickerFieldUI(props) {
       }))]
     }));
   }
+  // handle the case of showing custom `inputAdornment` for Field components
+  if (!additionalTextFieldInputProps?.endAdornment && !additionalTextFieldInputProps?.startAdornment && pickerFieldUIContext.slots.inputAdornment) {
+    additionalTextFieldInputProps.endAdornment = /*#__PURE__*/(0, _jsxRuntime.jsx)(InputAdornment, (0, _extends2.default)({}, endInputAdornmentProps));
+  }
   if (clearButtonPosition != null) {
     textFieldProps.sx = [{
       '& .clearButton': {
@@ -252,7 +276,18 @@ function PickerFieldUI(props) {
       }
     }, ...(Array.isArray(textFieldProps.sx) ? textFieldProps.sx : [textFieldProps.sx])];
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({}, textFieldProps));
+  const resolvedTextFieldInputProps = _version.major >= 6 && textFieldProps?.slotProps?.input ? (0, _resolveComponentProps.default)(mergeSlotProps(textFieldInputProps, additionalTextFieldInputProps), ownerState) : (0, _extends2.default)({}, textFieldInputProps, additionalTextFieldInputProps);
+
+  // Remove the `input` slotProps to avoid them overriding the manually resolved `InputProps`.
+  // Relevant on `materialMajor >= 6` since `slotProps` would take precedence.
+  delete textFieldProps?.slotProps?.input;
+  if (fieldResponse.enableAccessibleFieldDOMStructure) {
+    // Remove the `slotProps` on `PickersTextField` as they are not supported.
+    delete textFieldProps?.slotProps;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({}, textFieldProps, {
+    InputProps: resolvedTextFieldInputProps
+  }));
 }
 function mergeSlotProps(slotPropsA, slotPropsB) {
   if (!slotPropsA) {

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -14,7 +14,6 @@ var _PickerPopper = require("../../components/PickerPopper/PickerPopper");
 var _usePicker = require("../usePicker");
 var _PickersLayout = require("../../../PickersLayout");
 var _PickerProvider = require("../../components/PickerProvider");
-var _PickerFieldUI = require("../../components/PickerFieldUI");
 var _createNonRangePickerStepNavigation = require("../../utils/createNonRangePickerStepNavigation");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["props", "steps"],
@@ -82,21 +81,20 @@ const useDesktopPicker = _ref => {
       'aria-labelledby': labelledById
     }, innerSlotProps?.popper)
   });
-  const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickerFieldUI.PickerFieldUIContextProvider, {
+  const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps, {
       slots: slots,
       slotProps: slotProps,
-      inputRef: inputRef,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerPopper.PickerPopper, {
+      inputRef: inputRef
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerPopper.PickerPopper, {
+      slots: slots,
+      slotProps: slotProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {
         slots: slots,
         slotProps: slotProps,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {
-          slots: slots,
-          slotProps: slotProps,
-          children: renderCurrentView()
-        }))
-      })]
-    })
+        children: renderCurrentView()
+      }))
+    })]
   }));
   if (process.env.NODE_ENV !== "production") renderPicker.displayName = "renderPicker";
   return {

package/internals/hooks/useField/useFieldSectionContentProps.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useFieldSectionContentProps = useFieldSectionContentProps;
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _hooks = require("../../../hooks");
 var _syncSelectionToDOM = require("./syncSelectionToDOM");
 /**
@@ -21,7 +20,6 @@ var _syncSelectionToDOM = require("./syncSelectionToDOM");
 function useFieldSectionContentProps(parameters) {
   const adapter = (0, _hooks.usePickerAdapter)();
   const translations = (0, _hooks.usePickerTranslations)();
-  const id = (0, _useId.default)();
   const {
     focused,
     domGetters,
@@ -155,7 +153,6 @@ function useFieldSectionContentProps(parameters) {
       onDragOver: handleDragOver,
       onFocus: createFocusHandler(sectionIndex),
       // Aria attributes
-      'aria-labelledby': `${id}-${section.type}`,
       'aria-readonly': readOnly,
       'aria-valuenow': getSectionValueNow(section, adapter),
       'aria-valuemin': sectionBoundaries.minimum,
@@ -167,7 +164,6 @@ function useFieldSectionContentProps(parameters) {
       tabIndex: isContainerEditable || sectionIndex > 0 ? -1 : 0,
       contentEditable: !isContainerEditable && !disabled && !readOnly,
       role: 'spinbutton',
-      id: `${id}-${section.type}`,
       'data-range-position': section.dateName || undefined,
       spellCheck: isEditable ? false : undefined,
       autoCapitalize: isEditable ? 'off' : undefined,
@@ -175,7 +171,7 @@ function useFieldSectionContentProps(parameters) {
       children: section.value || section.placeholder,
       inputMode: section.contentType === 'letter' ? 'text' : 'numeric'
     };
-  }, [sectionsValueBoundaries, id, isContainerEditable, disabled, readOnly, isEditable, translations, adapter, handleInput, handlePaste, handleMouseUp, handleDragOver, createFocusHandler, fieldValueManager, value]);
+  }, [sectionsValueBoundaries, isContainerEditable, disabled, readOnly, isEditable, translations, adapter, handleInput, handlePaste, handleMouseUp, handleDragOver, createFocusHandler, fieldValueManager, value]);
 }
 function getSectionValueText(section, adapter) {
   if (!section.value) {
@@ -185,13 +181,18 @@ function getSectionValueText(section, adapter) {
     case 'month':
       {
         if (section.contentType === 'digit') {
-          return adapter.format(adapter.setMonth(adapter.date(), Number(section.value) - 1), 'month');
+          const dateWithMonth = adapter.setMonth(adapter.date(), Number(section.value) - 1);
+          return adapter.isValid(dateWithMonth) ? adapter.format(dateWithMonth, 'month') : '';
         }
         const parsedDate = adapter.parse(section.value, section.format);
-        return parsedDate ? adapter.format(parsedDate, 'month') : undefined;
+        return parsedDate && adapter.isValid(parsedDate) ? adapter.format(parsedDate, 'month') : undefined;
       }
     case 'day':
-      return section.contentType === 'digit' ? adapter.format(adapter.setDate(adapter.startOfYear(adapter.date()), Number(section.value)), 'dayOfMonthFull') : section.value;
+      if (section.contentType === 'digit') {
+        const dateWithDay = adapter.setDate(adapter.startOfYear(adapter.date()), Number(section.value));
+        return adapter.isValid(dateWithDay) ? adapter.format(dateWithDay, 'dayOfMonthFull') : '';
+      }
+      return section.value;
     case 'weekDay':
       // TODO: improve by providing the label of the week day
       return undefined;