@mui/x-date-pickers 8.0.0-alpha.1 → 8.0.0-alpha.11

package/DateField/DateField.js

@@ -1,18 +1,14 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];
+const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MuiTextField from '@mui/material/TextField';
 import { useThemeProps } from '@mui/material/styles';
-import useSlotProps from '@mui/utils/useSlotProps';
 import { refType } from '@mui/utils';
 import { useDateField } from "./useDateField.js";
-import { useClearableField } from "../hooks/index.js";
-import { PickersTextField } from "../PickersTextField/index.js";
-import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";
+import { PickerFieldUI, useFieldTextFieldProps } from "../internals/components/PickerFieldUI.js";
+import { CalendarIcon } from "../icons/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -31,33 +27,21 @@ const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, inRe
   });
   const {
       slots,
-      slotProps,
-      InputProps,
-      inputProps
+      slotProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const ownerState = themeProps;
-  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
-  const textFieldProps = useSlotProps({
-    elementType: TextField,
-    externalSlotProps: slotProps?.textField,
-    externalForwardedProps: other,
-    additionalProps: {
-      ref: inRef
-    },
-    ownerState
+  const textFieldProps = useFieldTextFieldProps({
+    slotProps,
+    ref: inRef,
+    externalForwardedProps: other
   });
-
-  // TODO: Remove when mui/material-ui#35088 will be merged
-  textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
-  textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
   const fieldResponse = useDateField(textFieldProps);
-  const convertedFieldResponse = convertFieldResponseIntoMuiTextFieldProps(fieldResponse);
-  const processedFieldProps = useClearableField(_extends({}, convertedFieldResponse, {
-    slots,
-    slotProps
-  }));
-  return /*#__PURE__*/_jsx(TextField, _extends({}, processedFieldProps));
+  return /*#__PURE__*/_jsx(PickerFieldUI, {
+    slots: slots,
+    slotProps: slotProps,
+    fieldResponse: fieldResponse,
+    defaultOpenPickerIcon: CalendarIcon
+  });
 });
 process.env.NODE_ENV !== "production" ? DateField.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -75,6 +59,12 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @default false
    */
   clearable: PropTypes.bool,
+  /**
+   * The position at which the clear button is placed.
+   * If the field is not clearable, the button is not rendered.
+   * @default 'end'
+   */
+  clearButtonPosition: PropTypes.oneOf(['end', 'start']),
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
@@ -218,6 +208,12 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @param {FieldSelectedSections} newValue The new selected sections.
    */
   onSelectedSectionsChange: PropTypes.func,
+  /**
+   * The position at which the opening button is placed.
+   * If there is no picker to open, the button is not rendered
+   * @default 'end'
+   */
+  openPickerButtonPosition: PropTypes.oneOf(['end', 'start']),
   /**
    * If `true`, the component is read-only.
    * When read-only, the value cannot be changed but the user can interact with the interface.
@@ -267,10 +263,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   shouldDisableYear: PropTypes.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.

package/DateField/DateField.types.d.ts

@@ -1,12 +1,10 @@
-import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
 import { MakeOptional } from '@mui/x-internals/types';
-import TextField from '@mui/material/TextField';
-import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
-import { DateValidationError, FieldSection, PickerValidDate, BuiltInFieldTextFieldProps } from '../models';
+import { DateValidationError, BuiltInFieldTextFieldProps } from '../models';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
 import { ExportedValidateDateProps } from '../validation/validateDate';
-export interface UseDateFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, DateValidationError>, 'format'>, ExportedValidateDateProps, ExportedUseClearableFieldProps {
+import { PickerValue } from '../internals/models';
+import { ExportedPickerFieldUIProps, PickerFieldUISlotProps, PickerFieldUISlots } from '../internals/components/PickerFieldUI';
+export interface UseDateFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateValidationError>, 'format'>, ExportedValidateDateProps, ExportedPickerFieldUIProps {
 }
 export type DateFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = UseDateFieldProps<TEnableAccessibleFieldDOMStructure> & Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseDateFieldProps<TEnableAccessibleFieldDOMStructure>> & {
     /**
@@ -18,16 +16,10 @@ export type DateFieldProps<TEnableAccessibleFieldDOMStructure extends boolean =
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DateFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
+    slotProps?: DateFieldSlotProps;
 };
 export type DateFieldOwnerState<TEnableAccessibleFieldDOMStructure extends boolean> = DateFieldProps<TEnableAccessibleFieldDOMStructure>;
-export interface DateFieldSlots extends UseClearableFieldSlots {
-    /**
-     * Form control with an input to render the value.
-     * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
-     */
-    textField?: React.ElementType;
+export interface DateFieldSlots extends PickerFieldUISlots {
 }
-export interface DateFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
-    textField?: SlotComponentProps<typeof TextField, {}, DateFieldOwnerState<TEnableAccessibleFieldDOMStructure>>;
+export interface DateFieldSlotProps extends PickerFieldUISlotProps {
 }

package/DateField/useDateField.d.ts

@@ -1,2 +1,2 @@
 import { UseDateFieldProps } from './DateField.types';
-export declare const useDateField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateFieldProps<TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseDateFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedDateFieldBaseProps> & Required<Pick<UseDateFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedDateFieldBaseProps>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "formatDensity" | "enableAccessibleFieldDOMStructure" | "selectedSections" | "onSelectedSectionsChange" | "timezone" | "unstableFieldRef" | "referenceDate" | "shouldRespectLeadingZeros" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | keyof import("../internals").BaseDateValidationProps | "dateSeparator">>;
+export declare const useDateField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "timezone" | keyof import("../internals").BaseDateValidationProps | "shouldDisableYear" | "shouldDisableMonth" | "shouldDisableDate" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "unstableStartFieldRef" | "unstableEndFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;

package/DateField/useDateField.js

@@ -1,22 +1,25 @@
 'use client';
 
-import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
-import { useField } from "../internals/hooks/useField/index.js";
-import { validateDate } from "../validation/index.js";
+import { useField, useFieldInternalPropsWithDefaults } from "../internals/hooks/useField/index.js";
 import { useSplitFieldProps } from "../hooks/index.js";
-import { useDefaultizedDateField } from "../internals/hooks/defaultizedFieldProps.js";
-export const useDateField = inProps => {
-  const props = useDefaultizedDateField(inProps);
+import { useDateManager } from "../managers/index.js";
+export const useDateField = props => {
+  const manager = useDateManager(props);
   const {
     forwardedProps,
     internalProps
   } = useSplitFieldProps(props, 'date');
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps
+  });
   return useField({
     forwardedProps,
-    internalProps,
-    valueManager: singleItemValueManager,
-    fieldValueManager: singleItemFieldValueManager,
-    validator: validateDate,
-    valueType: 'date'
+    internalProps: internalPropsWithDefaults,
+    valueManager: manager.internal_valueManager,
+    fieldValueManager: manager.internal_fieldValueManager,
+    validator: manager.validator,
+    valueType: manager.valueType,
+    getOpenPickerButtonAriaLabel: manager.internal_getOpenPickerButtonAriaLabel
   });
 };

package/DatePicker/DatePicker.js

@@ -59,7 +59,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
+   * If `true`, the Picker will close after submitting the full date.
    * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
    */
   closeOnSelect: PropTypes.bool,

package/DatePicker/DatePicker.types.d.ts

@@ -1,7 +1,6 @@
 import { DesktopDatePickerProps, DesktopDatePickerSlots, DesktopDatePickerSlotProps } from '../DesktopDatePicker';
-import { BaseSingleInputFieldProps } from '../internals/models';
+import { BaseSingleInputFieldProps, PickerValue } from '../internals/models';
 import { MobileDatePickerProps, MobileDatePickerSlots, MobileDatePickerSlotProps } from '../MobileDatePicker';
-import { DateValidationError, FieldSection, PickerValidDate } from '../models';
 import { ValidateDateProps } from '../validation/validateDate';
 export interface DatePickerSlots extends DesktopDatePickerSlots, MobileDatePickerSlots {
 }
@@ -29,8 +28,13 @@ export interface DatePickerProps<TEnableAccessibleFieldDOMStructure extends bool
      * @default 4 on desktop, 3 on mobile
      */
     yearsPerRow?: 3 | 4;
+    /**
+     * If `true`, the Picker will close after submitting the full date.
+     * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+     */
+    closeOnSelect?: boolean;
 }
 /**
  * Props the field can receive when used inside a date picker (<DatePicker />, <DesktopDatePicker /> or <MobileDatePicker /> component).
  */
-export type DatePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateDateProps & BaseSingleInputFieldProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, DateValidationError>;
+export type DatePickerFieldProps = ValidateDateProps & BaseSingleInputFieldProps<PickerValue>;

package/DatePicker/DatePickerToolbar.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
-import { DateView, PickerValidDate } from '../models';
 import { DatePickerToolbarClasses } from './datePickerToolbarClasses';
-export interface DatePickerToolbarProps extends BaseToolbarProps<PickerValidDate | null, DateView>, ExportedDatePickerToolbarProps {
+export interface DatePickerToolbarProps extends BaseToolbarProps, ExportedDatePickerToolbarProps {
 }
 export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps {
     /**

package/DatePicker/DatePickerToolbar.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "views", "className", "onViewChange", "view"];
+const _excluded = ["toolbarFormat", "toolbarPlaceholder", "className", "classes"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -14,11 +14,10 @@ import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { getDatePickerToolbarUtilityClass } from "./datePickerToolbarClasses.js";
 import { resolveDateFormat } from "../internals/utils/date-utils.js";
+import { useToolbarOwnerState } from "../internals/hooks/useToolbarOwnerState.js";
+import { usePickerContext } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     title: ['title']
@@ -37,7 +36,7 @@ const DatePickerToolbarTitle = styled(Typography, {
 })({
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       margin: 'auto 16px auto auto'
@@ -60,19 +59,23 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
     name: 'MuiDatePickerToolbar'
   });
   const {
-      value,
-      isLandscape,
       toolbarFormat,
       toolbarPlaceholder = '––',
-      views,
-      className
+      className,
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
+  const {
+    value,
+    views,
+    orientation
+  } = usePickerContext();
   const translations = usePickerTranslations();
-  const classes = useUtilityClasses(props);
+  const ownerState = useToolbarOwnerState();
+  const classes = useUtilityClasses(classesProp);
   const dateText = React.useMemo(() => {
-    if (!value) {
+    if (!utils.isValid(value)) {
       return toolbarPlaceholder;
     }
     const formatFromViews = resolveDateFormat(utils, {
@@ -81,16 +84,14 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
     }, true);
     return utils.formatByString(value, formatFromViews);
   }, [value, toolbarFormat, toolbarPlaceholder, utils, views]);
-  const ownerState = props;
   return /*#__PURE__*/_jsx(DatePickerToolbarRoot, _extends({
     ref: ref,
     toolbarTitle: translations.datePickerToolbarTitle,
-    isLandscape: isLandscape,
     className: clsx(classes.root, className)
   }, other, {
     children: /*#__PURE__*/_jsx(DatePickerToolbarTitle, {
       variant: "h4",
-      align: isLandscape ? 'left' : 'center',
+      align: orientation === 'landscape' ? 'left' : 'center',
       ownerState: ownerState,
       className: classes.title,
       children: dateText
@@ -112,14 +113,6 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    * @default `true` for Desktop, `false` for Mobile.
    */
   hidden: PropTypes.bool,
-  isLandscape: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -133,14 +126,5 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    * Toolbar value placeholder—it is displayed when the value is empty.
    * @default "––"
    */
-  toolbarPlaceholder: PropTypes.node,
-  value: PropTypes.object,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
-  /**
-   * Available views.
-   */
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired).isRequired
+  toolbarPlaceholder: PropTypes.node
 } : void 0;

package/DatePicker/shared.d.ts

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { DateCalendarSlots, DateCalendarSlotProps, ExportedDateCalendarProps } from '../DateCalendar/DateCalendar.types';
-import { DateValidationError, DateView, PickerValidDate } from '../models';
+import { DateValidationError, DateView } from '../models';
 import { BasePickerInputProps } from '../internals/models/props/basePickerProps';
-import { BaseDateValidationProps } from '../internals/models/validation';
 import { LocalizedComponent } from '../locales/utils/pickersLocaleTextApi';
 import { DatePickerToolbarProps, ExportedDatePickerToolbarProps } from './DatePickerToolbar';
 import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews';
 import { DateViewRendererProps } from '../dateViewRenderers';
+import { PickerValue } from '../internals/models';
+import { ValidateDatePropsToDefault } from '../validation/validateDate';
 export interface BaseDatePickerSlots extends DateCalendarSlots {
     /**
      * Custom component for the toolbar rendered above the views.
@@ -18,8 +19,8 @@ export interface BaseDatePickerSlots extends DateCalendarSlots {
 export interface BaseDatePickerSlotProps extends DateCalendarSlotProps {
     toolbar?: ExportedDatePickerToolbarProps;
 }
-export type DatePickerViewRenderers<TView extends DateView, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<PickerValidDate | null, TView, DateViewRendererProps<TView>, TAdditionalProps>;
-export interface BaseDatePickerProps extends BasePickerInputProps<PickerValidDate | null, DateView, DateValidationError>, ExportedDateCalendarProps {
+export type DatePickerViewRenderers<TView extends DateView> = PickerViewRendererLookup<PickerValue, TView, DateViewRendererProps<TView>>;
+export interface BaseDatePickerProps extends BasePickerInputProps<PickerValue, DateView, DateValidationError>, ExportedDateCalendarProps {
     /**
      * Overridable component slots.
      * @default {}
@@ -37,6 +38,6 @@ export interface BaseDatePickerProps extends BasePickerInputProps<PickerValidDat
      */
     viewRenderers?: Partial<DatePickerViewRenderers<DateView>>;
 }
-type UseDatePickerDefaultizedProps<Props extends BaseDatePickerProps> = LocalizedComponent<DefaultizedProps<Props, 'views' | 'openTo' | keyof BaseDateValidationProps>>;
+type UseDatePickerDefaultizedProps<Props extends BaseDatePickerProps> = LocalizedComponent<DefaultizedProps<Props, 'views' | 'openTo' | ValidateDatePropsToDefault>>;
 export declare function useDatePickerDefaultizedProps<Props extends BaseDatePickerProps>(props: Props, name: string): UseDatePickerDefaultizedProps<Props>;
 export {};

package/DateTimeField/DateTimeField.js

@@ -1,18 +1,14 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];
+const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MuiTextField from '@mui/material/TextField';
 import { useThemeProps } from '@mui/material/styles';
-import useSlotProps from '@mui/utils/useSlotProps';
 import { refType } from '@mui/utils';
 import { useDateTimeField } from "./useDateTimeField.js";
-import { useClearableField } from "../hooks/index.js";
-import { PickersTextField } from "../PickersTextField/index.js";
-import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";
+import { PickerFieldUI, useFieldTextFieldProps } from "../internals/components/PickerFieldUI.js";
+import { CalendarIcon } from "../icons/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -31,33 +27,21 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
   });
   const {
       slots,
-      slotProps,
-      InputProps,
-      inputProps
+      slotProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const ownerState = themeProps;
-  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
-  const textFieldProps = useSlotProps({
-    elementType: TextField,
-    externalSlotProps: slotProps?.textField,
-    externalForwardedProps: other,
-    ownerState,
-    additionalProps: {
-      ref: inRef
-    }
+  const textFieldProps = useFieldTextFieldProps({
+    slotProps,
+    ref: inRef,
+    externalForwardedProps: other
   });
-
-  // TODO: Remove when mui/material-ui#35088 will be merged
-  textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
-  textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
   const fieldResponse = useDateTimeField(textFieldProps);
-  const convertedFieldResponse = convertFieldResponseIntoMuiTextFieldProps(fieldResponse);
-  const processedFieldProps = useClearableField(_extends({}, convertedFieldResponse, {
-    slots,
-    slotProps
-  }));
-  return /*#__PURE__*/_jsx(TextField, _extends({}, processedFieldProps));
+  return /*#__PURE__*/_jsx(PickerFieldUI, {
+    slots: slots,
+    slotProps: slotProps,
+    fieldResponse: fieldResponse,
+    defaultOpenPickerIcon: CalendarIcon
+  });
 });
 process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -80,6 +64,12 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @default false
    */
   clearable: PropTypes.bool,
+  /**
+   * The position at which the clear button is placed.
+   * If the field is not clearable, the button is not rendered.
+   * @default 'end'
+   */
+  clearButtonPosition: PropTypes.oneOf(['end', 'start']),
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
@@ -251,6 +241,12 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @param {FieldSelectedSections} newValue The new selected sections.
    */
   onSelectedSectionsChange: PropTypes.func,
+  /**
+   * The position at which the opening button is placed.
+   * If there is no picker to open, the button is not rendered
+   * @default 'end'
+   */
+  openPickerButtonPosition: PropTypes.oneOf(['end', 'start']),
   /**
    * If `true`, the component is read-only.
    * When read-only, the value cannot be changed but the user can interact with the interface.
@@ -307,10 +303,10 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    */
   shouldDisableYear: PropTypes.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.

package/DateTimeField/DateTimeField.types.d.ts

@@ -1,13 +1,11 @@
-import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
 import { MakeOptional } from '@mui/x-internals/types';
-import TextField from '@mui/material/TextField';
-import { DateTimeValidationError, FieldSection, PickerValidDate, BuiltInFieldTextFieldProps } from '../models';
+import { DateTimeValidationError, BuiltInFieldTextFieldProps } from '../models';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
-import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
 import { ExportedValidateDateTimeProps } from '../validation/validateDateTime';
 import { AmPmProps } from '../internals/models/props/time';
-export interface UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, DateTimeValidationError>, 'format'>, ExportedValidateDateTimeProps, ExportedUseClearableFieldProps, AmPmProps {
+import { PickerValue } from '../internals/models';
+import { ExportedPickerFieldUIProps, PickerFieldUISlotProps, PickerFieldUISlots } from '../internals/components/PickerFieldUI';
+export interface UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateTimeValidationError>, 'format'>, ExportedValidateDateTimeProps, ExportedPickerFieldUIProps, AmPmProps {
 }
 export type DateTimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure> & Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>> & {
     /**
@@ -19,16 +17,9 @@ export type DateTimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolea
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DateTimeFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
+    slotProps?: DateTimeFieldSlotProps;
 };
-export type DateTimeFieldOwnerState<TEnableAccessibleFieldDOMStructure extends boolean> = DateTimeFieldProps<TEnableAccessibleFieldDOMStructure>;
-export interface DateTimeFieldSlots extends UseClearableFieldSlots {
-    /**
-     * Form control with an input to render the value.
-     * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
-     */
-    textField?: React.ElementType;
+export interface DateTimeFieldSlots extends PickerFieldUISlots {
 }
-export interface DateTimeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
-    textField?: SlotComponentProps<typeof TextField, {}, DateTimeFieldOwnerState<TEnableAccessibleFieldDOMStructure>>;
+export interface DateTimeFieldSlotProps extends PickerFieldUISlotProps {
 }

package/DateTimeField/useDateTimeField.d.ts

@@ -1,2 +1,2 @@
 import { UseDateTimeFieldProps } from './DateTimeField.types';
-export declare const useDateTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedDateTimeFieldBaseProps> & Required<Pick<UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedDateTimeFieldBaseProps>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "formatDensity" | "enableAccessibleFieldDOMStructure" | "selectedSections" | "onSelectedSectionsChange" | "timezone" | "unstableFieldRef" | "referenceDate" | "shouldRespectLeadingZeros" | "ampm" | "disableFuture" | "disablePast" | "maxDate" | "minDate" | "minutesStep" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | "minTime" | "maxTime" | "shouldDisableTime" | "disableIgnoringDatePartForTimeValidation" | "minDateTime" | "maxDateTime" | "dateSeparator">>;
+export declare const useDateTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "ampm" | "disableFuture" | "disablePast" | "maxDate" | "minDate" | "timezone" | "shouldDisableYear" | "shouldDisableMonth" | "shouldDisableDate" | "minTime" | "maxTime" | "minutesStep" | "shouldDisableTime" | "disableIgnoringDatePartForTimeValidation" | "minDateTime" | "maxDateTime" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "unstableStartFieldRef" | "unstableEndFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;

package/DateTimeField/useDateTimeField.js

@@ -1,22 +1,25 @@
 'use client';
 
-import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
-import { useField } from "../internals/hooks/useField/index.js";
-import { validateDateTime } from "../validation/index.js";
+import { useField, useFieldInternalPropsWithDefaults } from "../internals/hooks/useField/index.js";
 import { useSplitFieldProps } from "../hooks/index.js";
-import { useDefaultizedDateTimeField } from "../internals/hooks/defaultizedFieldProps.js";
-export const useDateTimeField = inProps => {
-  const props = useDefaultizedDateTimeField(inProps);
+import { useDateTimeManager } from "../managers/index.js";
+export const useDateTimeField = props => {
+  const manager = useDateTimeManager(props);
   const {
     forwardedProps,
     internalProps
   } = useSplitFieldProps(props, 'date-time');
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps
+  });
   return useField({
     forwardedProps,
-    internalProps,
-    valueManager: singleItemValueManager,
-    fieldValueManager: singleItemFieldValueManager,
-    validator: validateDateTime,
-    valueType: 'date-time'
+    internalProps: internalPropsWithDefaults,
+    valueManager: manager.internal_valueManager,
+    fieldValueManager: manager.internal_fieldValueManager,
+    validator: manager.validator,
+    valueType: manager.valueType,
+    getOpenPickerButtonAriaLabel: manager.internal_getOpenPickerButtonAriaLabel
   });
 };

package/DateTimePicker/DateTimePicker.js

@@ -69,8 +69,8 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: PropTypes.bool,
   /**

package/DateTimePicker/DateTimePicker.types.d.ts

@@ -1,12 +1,11 @@
 import { DesktopDateTimePickerProps, DesktopDateTimePickerSlots, DesktopDateTimePickerSlotProps } from '../DesktopDateTimePicker';
-import { BaseSingleInputFieldProps, DateOrTimeViewWithMeridiem } from '../internals/models';
+import { BaseSingleInputFieldProps, DateOrTimeViewWithMeridiem, PickerValue } from '../internals/models';
 import { MobileDateTimePickerProps, MobileDateTimePickerSlots, MobileDateTimePickerSlotProps } from '../MobileDateTimePicker';
-import { DateTimeValidationError, FieldSection, PickerValidDate } from '../models';
 import { ValidateDateTimeProps } from '../validation';
 import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types';
-export interface DateTimePickerSlots extends DesktopDateTimePickerSlots, MobileDateTimePickerSlots<DateOrTimeViewWithMeridiem> {
+export interface DateTimePickerSlots extends DesktopDateTimePickerSlots, MobileDateTimePickerSlots {
 }
-export interface DateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileDateTimePickerSlotProps<DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure> {
+export interface DateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure> {
 }
 export interface DateTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends DesktopDateTimePickerProps<TEnableAccessibleFieldDOMStructure>, ExportedYearCalendarProps, Omit<MobileDateTimePickerProps<DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, 'views'> {
     /**
@@ -34,4 +33,4 @@ export interface DateTimePickerProps<TEnableAccessibleFieldDOMStructure extends
 /**
  * Props the field can receive when used inside a date time picker (<DateTimePicker />, <DesktopDateTimePicker /> or <MobileDateTimePicker /> component).
  */
-export type DateTimePickerFieldProps = ValidateDateTimeProps & BaseSingleInputFieldProps<PickerValidDate | null, FieldSection, false, DateTimeValidationError>;
+export type DateTimePickerFieldProps = ValidateDateTimeProps & BaseSingleInputFieldProps<PickerValue>;