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

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className"];
+const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -12,17 +12,14 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import { convertFieldResponseIntoMuiTextFieldProps, useFieldOwnerState } from '@mui/x-date-pickers/internals';
 import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import { useMultiInputDateTimeRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const multiInputDateTimeRangeFieldClasses = generateUtilityClasses('MuiMultiInputDateTimeRangeField', ['root', 'separator']);
 export const getMultiInputDateTimeRangeFieldUtilityClass = slot => generateUtilityClass('MuiMultiInputDateTimeRangeField', slot);
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     separator: ['separator']
@@ -70,11 +67,12 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       slotProps,
       unstableStartFieldRef,
       unstableEndFieldRef,
-      className
+      className,
+      classes: classesProp
     } = forwardedProps,
     otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
-  const ownerState = themeProps;
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = useFieldOwnerState(themeProps);
+  const classes = useUtilityClasses(classesProp);
   const Root = slots?.root ?? MultiInputDateTimeRangeFieldRoot;
   const rootProps = useSlotProps({
     elementType: Root,
@@ -298,10 +296,10 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    */
   shouldDisableTime: 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/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import Typography from '@mui/material/Typography';
-import Stack, { StackProps } from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
+import type { TypographyProps } from '@mui/material/Typography';
+import type { StackProps } from '@mui/material/Stack';
+import type { TextFieldProps } from '@mui/material/TextField';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
 import { UseDateTimeRangeFieldProps } from '../internals/models/dateTimeRange';
 import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
 import { MultiInputFieldRefs, MultiInputRangeFieldClasses, RangePosition } from '../models';
@@ -25,7 +27,7 @@ export interface MultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStru
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MultiInputDateTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
+    slotProps?: MultiInputDateTimeRangeFieldSlotProps;
 }
 export interface MultiInputDateTimeRangeFieldSlots {
     /**
@@ -45,10 +47,10 @@ export interface MultiInputDateTimeRangeFieldSlots {
      */
     separator?: React.ElementType;
 }
-export interface MultiInputDateTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> {
-    root?: SlotComponentProps<typeof Stack, {}, MultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>;
-    textField?: SlotComponentProps<typeof TextField, {}, MultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
+export interface MultiInputDateTimeRangeFieldSlotProps {
+    root?: SlotComponentPropsFromProps<StackProps, {}, FieldOwnerState>;
+    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState & {
         position: RangePosition;
     }>;
-    separator?: SlotComponentProps<typeof Typography, {}, MultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>;
+    separator?: SlotComponentPropsFromProps<TypographyProps, {}, FieldOwnerState>;
 }

package/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className"];
+const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { clsx } from 'clsx';
@@ -12,17 +12,14 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import { convertFieldResponseIntoMuiTextFieldProps, useFieldOwnerState } from '@mui/x-date-pickers/internals';
 import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import { useMultiInputTimeRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const multiInputTimeRangeFieldClasses = generateUtilityClasses('MuiMultiInputTimeRangeField', ['root', 'separator']);
 export const getMultiInputTimeRangeFieldUtilityClass = slot => generateUtilityClass('MuiMultiInputTimeRangeField', slot);
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     separator: ['separator']
@@ -70,11 +67,12 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       slotProps,
       unstableStartFieldRef,
       unstableEndFieldRef,
-      className
+      className,
+      classes: classesProp
     } = forwardedProps,
     otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
-  const ownerState = themeProps;
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = useFieldOwnerState(themeProps);
+  const classes = useUtilityClasses(classesProp);
   const Root = slots?.root ?? MultiInputTimeRangeFieldRoot;
   const rootProps = useSlotProps({
     elementType: Root,
@@ -270,10 +268,10 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    */
   shouldDisableTime: 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/MultiInputTimeRangeField/MultiInputTimeRangeField.types.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import Typography from '@mui/material/Typography';
-import Stack, { StackProps } from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
+import type { TypographyProps } from '@mui/material/Typography';
+import type { StackProps } from '@mui/material/Stack';
+import type { TextFieldProps } from '@mui/material/TextField';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
 import { UseTimeRangeFieldProps } from '../internals/models/timeRange';
 import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
 import { MultiInputFieldRefs, MultiInputRangeFieldClasses, RangePosition } from '../models';
@@ -25,7 +27,7 @@ export interface MultiInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructur
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MultiInputTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
+    slotProps?: MultiInputTimeRangeFieldSlotProps;
 }
 export interface MultiInputTimeRangeFieldSlots {
     /**
@@ -45,10 +47,10 @@ export interface MultiInputTimeRangeFieldSlots {
      */
     separator?: React.ElementType;
 }
-export interface MultiInputTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> {
-    root?: SlotComponentProps<typeof Stack, {}, MultiInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>;
-    textField?: SlotComponentProps<typeof TextField, {}, MultiInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
+export interface MultiInputTimeRangeFieldSlotProps {
+    root?: SlotComponentPropsFromProps<StackProps, {}, FieldOwnerState>;
+    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState & {
         position: RangePosition;
     }>;
-    separator?: SlotComponentProps<typeof Typography, {}, MultiInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>;
+    separator?: SlotComponentPropsFromProps<TypographyProps, {}, FieldOwnerState>;
 }

package/README.md

@@ -20,13 +20,16 @@ The pickers currently support the following date libraries:
 - [Moment.js](https://momentjs.com/)
 
 ```bash
-// date-fns
+# date-fns
 npm install date-fns
-// or dayjs
+
+# or dayjs
 npm install dayjs
-// or luxon
+
+# or luxon
 npm install luxon
-// or moment
+
+# or moment
 npm install moment
 ```
 

package/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -10,7 +10,7 @@ import { useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { refType } from '@mui/utils';
 import { useClearableField } from '@mui/x-date-pickers/hooks';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import { convertFieldResponseIntoMuiTextFieldProps, useFieldOwnerState } from '@mui/x-date-pickers/internals';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import { useSingleInputDateRangeField } from "./useSingleInputDateRangeField.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -36,7 +36,7 @@ const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleI
       inputProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const ownerState = themeProps;
+  const ownerState = useFieldOwnerState(themeProps);
   const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
@@ -262,10 +262,10 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    */
   shouldDisableDate: 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/SingleInputDateRangeField/SingleInputDateRangeField.types.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import TextField from '@mui/material/TextField';
-import { UseFieldInternalProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
-import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models';
+import { TextFieldProps } from '@mui/material/TextField';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { BuiltInFieldTextFieldProps, FieldOwnerState } from '@mui/x-date-pickers/models';
 import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '@mui/x-date-pickers/hooks';
-import type { RangeFieldSection, DateRangeValidationError, UseDateRangeFieldProps } from '../models';
-export interface UseSingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>, ExportedUseClearableFieldProps, Pick<UseFieldInternalProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, 'unstableFieldRef'> {
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
+import type { DateRangeValidationError, UseDateRangeFieldProps } from '../models';
+export interface UseSingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>, ExportedUseClearableFieldProps, Pick<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, 'unstableFieldRef'> {
 }
 export type SingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseSingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>> & UseSingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
     /**
@@ -17,15 +18,15 @@ export type SingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure ex
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: SingleInputDateRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
+    slotProps?: SingleInputDateRangeFieldSlotProps;
 };
 export interface SingleInputDateRangeFieldSlots extends UseClearableFieldSlots {
     /**
      * Form control with an input to render the value.
-     * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
+     * @default <PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
      */
     textField?: React.ElementType;
 }
-export interface SingleInputDateRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
-    textField?: SlotComponentProps<typeof TextField, {}, SingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>>;
+export interface SingleInputDateRangeFieldSlotProps extends UseClearableFieldSlotProps {
+    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
 }

package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -6,7 +6,7 @@ const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MuiTextField from '@mui/material/TextField';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import { convertFieldResponseIntoMuiTextFieldProps, useFieldOwnerState } from '@mui/x-date-pickers/internals';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import { useThemeProps } from '@mui/material/styles';
 import { refType } from '@mui/utils';
@@ -36,7 +36,7 @@ const SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Sin
       inputProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const ownerState = themeProps;
+  const ownerState = useFieldOwnerState(themeProps);
   const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
@@ -302,10 +302,10 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    */
   shouldDisableTime: 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/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import TextField from '@mui/material/TextField';
-import { UseFieldInternalProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
-import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models';
+import { TextFieldProps } from '@mui/material/TextField';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
+import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { BuiltInFieldTextFieldProps, FieldOwnerState } from '@mui/x-date-pickers/models';
 import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '@mui/x-date-pickers/hooks';
 import { UseDateTimeRangeFieldProps } from '../internals/models';
-import { RangeFieldSection, DateTimeRangeValidationError } from '../models';
-export interface UseSingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>, ExportedUseClearableFieldProps, Pick<UseFieldInternalProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, 'unstableFieldRef'> {
+import { DateTimeRangeValidationError } from '../models';
+export interface UseSingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>, ExportedUseClearableFieldProps, Pick<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, 'unstableFieldRef'> {
 }
 export type SingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseSingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>> & UseSingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
     /**
@@ -18,15 +19,15 @@ export type SingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructur
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: SingleInputDateTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
+    slotProps?: SingleInputDateTimeRangeFieldSlotProps;
 };
 export interface SingleInputDateTimeRangeFieldSlots extends UseClearableFieldSlots {
     /**
      * Form control with an input to render the value.
-     * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
+     * @default <PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
      */
     textField?: React.ElementType;
 }
-export interface SingleInputDateTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
-    textField?: SlotComponentProps<typeof TextField, {}, SingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>;
+export interface SingleInputDateTimeRangeFieldSlotProps extends UseClearableFieldSlotProps {
+    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
 }

package/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -7,7 +7,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import MuiTextField from '@mui/material/TextField';
 import { useClearableField } from '@mui/x-date-pickers/hooks';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import { convertFieldResponseIntoMuiTextFieldProps, useFieldOwnerState } from '@mui/x-date-pickers/internals';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import { useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
@@ -36,7 +36,7 @@ const SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleI
       inputProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const ownerState = themeProps;
+  const ownerState = useFieldOwnerState(themeProps);
   const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
@@ -274,10 +274,10 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    */
   shouldDisableTime: 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/SingleInputTimeRangeField/SingleInputTimeRangeField.types.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import TextField from '@mui/material/TextField';
+import type { TextFieldProps } from '@mui/material/TextField';
 import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
-import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models';
+import { BuiltInFieldTextFieldProps, FieldOwnerState } from '@mui/x-date-pickers/models';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
 import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '@mui/x-date-pickers/hooks';
 import { UseTimeRangeFieldProps } from '../internals/models';
-import { RangeFieldSection, TimeRangeValidationError } from '../models';
-export interface UseSingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>, ExportedUseClearableFieldProps, Pick<UseFieldInternalProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, 'unstableFieldRef'> {
+import { TimeRangeValidationError } from '../models';
+export interface UseSingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>, ExportedUseClearableFieldProps, Pick<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, 'unstableFieldRef'> {
 }
 export type SingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseSingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>> & UseSingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
     /**
@@ -18,15 +19,15 @@ export type SingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure ex
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: SingleInputTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
+    slotProps?: SingleInputTimeRangeFieldSlotProps;
 };
 export interface SingleInputTimeRangeFieldSlots extends UseClearableFieldSlots {
     /**
      * Form control with an input to render the value.
-     * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
+     * @default <PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
      */
     textField?: React.ElementType;
 }
-export interface SingleInputTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
-    textField?: SlotComponentProps<typeof TextField, {}, SingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>;
+export interface SingleInputTimeRangeFieldSlotProps extends UseClearableFieldSlotProps {
+    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
 }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v8.0.0-alpha.1
+ * @mui/x-date-pickers-pro v8.0.0-alpha.3
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/internals/hooks/models/useRangePicker.d.ts

@@ -3,7 +3,6 @@ import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from '@mui
 import { BaseRangeNonStaticPickerProps } from '../../models';
 import { UseRangePositionProps, UseRangePositionResponse } from '../useRangePosition';
 import { RangePickerFieldSlots, RangePickerFieldSlotProps } from '../useEnrichedRangePickerFieldProps';
-import { RangeFieldSection } from '../../../models';
 export interface UseRangePickerSlots<TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<PickerRangeValue, TView>, RangePickerFieldSlots {
 }
 export interface UseRangePickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedPickersLayoutSlotProps<PickerRangeValue, TView>, RangePickerFieldSlotProps<TEnableAccessibleFieldDOMStructure> {
@@ -16,6 +15,6 @@ export interface UseRangePickerProps<TView extends DateOrTimeViewWithMeridiem, T
 }
 export interface RangePickerAdditionalViewProps extends Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
 }
-export interface UseRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseRangePickerProps<TView, any, TExternalProps, TAdditionalViewProps>, TAdditionalViewProps extends {}> extends Pick<UsePickerParams<PickerRangeValue, TView, RangeFieldSection, TExternalProps, TAdditionalViewProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor'> {
+export interface UseRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseRangePickerProps<TView, any, TExternalProps, TAdditionalViewProps>, TAdditionalViewProps extends {}> extends Pick<UsePickerParams<PickerRangeValue, TView, TExternalProps, TAdditionalViewProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor'> {
     props: TExternalProps;
 }

package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -43,12 +43,21 @@ export const useDesktopRangePicker = _ref => {
   const popperRef = React.useRef(null);
   const startFieldRef = React.useRef(null);
   const endFieldRef = React.useRef(null);
+  const singleInputFieldRef = React.useRef(null);
   const initialView = React.useRef(props.openTo ?? null);
   const fieldType = slots.field.fieldType ?? 'multi-input';
   const {
     rangePosition,
     onRangePositionChange
-  } = useRangePosition(props, fieldType === 'single-input' ? startFieldRef : undefined);
+  } = useRangePosition(props, fieldType === 'single-input' ? singleInputFieldRef : undefined);
+  let fieldRef;
+  if (fieldType === 'single-input') {
+    fieldRef = singleInputFieldRef;
+  } else if (rangePosition === 'start') {
+    fieldRef = startFieldRef;
+  } else {
+    fieldRef = endFieldRef;
+  }
   const {
     open,
     actions,
@@ -62,7 +71,7 @@ export const useDesktopRangePicker = _ref => {
     props,
     variant: 'desktop',
     autoFocusView: false,
-    fieldRef: rangePosition === 'start' ? startFieldRef : endFieldRef,
+    fieldRef,
     localeText,
     additionalViewProps: {
       rangePosition,
@@ -130,6 +139,7 @@ export const useDesktopRangePicker = _ref => {
     anchorRef,
     startFieldRef,
     endFieldRef,
+    singleInputFieldRef,
     currentView: layoutProps.view !== props.openTo ? layoutProps.view : undefined,
     initialView: initialView.current ?? undefined,
     onViewChange: layoutProps.onViewChange

package/internals/hooks/useEnrichedRangePickerFieldProps.d.ts

@@ -3,12 +3,12 @@ import Stack, { StackProps } from '@mui/material/Stack';
 import Typography, { TypographyProps } from '@mui/material/Typography';
 import { SlotComponentProps } from '@mui/utils';
 import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { FieldRef, PickerOwnerState } from '@mui/x-date-pickers/models';
+import { FieldRef, PickerOwnerState, FieldOwnerState } from '@mui/x-date-pickers/models';
 import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '@mui/x-date-pickers/hooks';
 import { PickersInputLocaleText } from '@mui/x-date-pickers/locales';
-import { UsePickerResponse, PickerVariant, DateOrTimeViewWithMeridiem, BaseSingleInputFieldProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { UsePickerResponse, PickerVariant, DateOrTimeViewWithMeridiem, BaseSingleInputFieldProps, PickerRangeValue, PickerValue } from '@mui/x-date-pickers/internals';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
-import { RangeFieldSection, RangePosition, FieldType, UseDateRangeFieldProps, PickerRangeFieldSlotProps } from '../../models';
+import { RangePosition, FieldType, PickerRangeFieldSlotProps } from '../../models';
 import { UseRangePositionResponse } from './useRangePosition';
 import { BaseMultiInputFieldProps } from '../models/fields';
 export interface RangePickerFieldSlots extends UseClearableFieldSlots {
@@ -31,15 +31,15 @@ export interface RangePickerFieldSlots extends UseClearableFieldSlots {
     textField?: React.ElementType;
 }
 export interface RangePickerFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
-    field?: SlotComponentPropsFromProps<PickerRangeFieldSlotProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
-    fieldRoot?: SlotComponentProps<typeof Stack, {}, Record<string, any>>;
-    fieldSeparator?: SlotComponentProps<typeof Typography, {}, Record<string, any>>;
-    textField?: SlotComponentProps<typeof PickersTextField, {}, UseDateRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
+    field?: SlotComponentPropsFromProps<PickerRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
+    fieldRoot?: SlotComponentProps<typeof Stack, {}, FieldOwnerState>;
+    fieldSeparator?: SlotComponentProps<typeof Typography, {}, FieldOwnerState>;
+    textField?: SlotComponentProps<typeof PickersTextField, {}, FieldOwnerState & {
         position?: RangePosition;
     }>;
 }
-export type RangePickerPropsForFieldSlot<TIsSingleInput extends boolean, TEnableAccessibleFieldDOMStructure extends boolean, TError> = (TIsSingleInput extends true ? BaseSingleInputFieldProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TError> : never) | (TIsSingleInput extends false ? BaseMultiInputFieldProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TError> : never);
-export interface UseEnrichedRangePickerFieldPropsParams<TIsSingleInput extends boolean, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends Pick<UsePickerResponse<PickerRangeValue, TView, RangeFieldSection, any>, 'open' | 'actions'>, UseRangePositionResponse {
+export type RangePickerPropsForFieldSlot<TIsSingleInput extends boolean, TEnableAccessibleFieldDOMStructure extends boolean, TError> = (TIsSingleInput extends true ? BaseSingleInputFieldProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TError> : never) | (TIsSingleInput extends false ? BaseMultiInputFieldProps<TEnableAccessibleFieldDOMStructure, TError> : never);
+export interface UseEnrichedRangePickerFieldPropsParams<TIsSingleInput extends boolean, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends Pick<UsePickerResponse<PickerRangeValue, TView, any>, 'open' | 'actions'>, UseRangePositionResponse {
     variant: PickerVariant;
     fieldType: FieldType;
     readOnly?: boolean;
@@ -55,7 +55,8 @@ export interface UseEnrichedRangePickerFieldPropsParams<TIsSingleInput extends b
     currentView?: TView | null;
     initialView?: TView;
     onViewChange?: (view: TView) => void;
-    startFieldRef: React.RefObject<FieldRef<RangeFieldSection>>;
-    endFieldRef: React.RefObject<FieldRef<RangeFieldSection>>;
+    startFieldRef: React.RefObject<FieldRef<PickerValue>>;
+    endFieldRef: React.RefObject<FieldRef<PickerValue>>;
+    singleInputFieldRef: React.RefObject<FieldRef<PickerRangeValue>>;
 }
-export declare const useEnrichedRangePickerFieldProps: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError>(params: UseEnrichedRangePickerFieldPropsParams<boolean, TView, TEnableAccessibleFieldDOMStructure, TError>) => BaseMultiInputFieldProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TError> | BaseSingleInputFieldProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TError>;
+export declare const useEnrichedRangePickerFieldProps: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError>(params: UseEnrichedRangePickerFieldPropsParams<boolean, TView, TEnableAccessibleFieldDOMStructure, TError>) => BaseMultiInputFieldProps<TEnableAccessibleFieldDOMStructure, TError> | BaseSingleInputFieldProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TError>;

package/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -156,36 +156,35 @@ const useSingleInputFieldSlotProps = ({
   onBlur,
   rangePosition,
   onRangePositionChange,
-  startFieldRef,
-  endFieldRef,
+  singleInputFieldRef,
   pickerSlots,
   pickerSlotProps,
   fieldProps,
   anchorRef,
   currentView
 }) => {
-  const handleFieldRef = useForkRef(fieldProps.unstableFieldRef, startFieldRef, endFieldRef);
+  const handleFieldRef = useForkRef(fieldProps.unstableFieldRef, singleInputFieldRef);
   React.useEffect(() => {
-    if (!open || !startFieldRef.current || variant === 'mobile') {
+    if (!open || !singleInputFieldRef.current || variant === 'mobile') {
       return;
     }
-    if (startFieldRef.current.isFieldFocused()) {
+    if (singleInputFieldRef.current.isFieldFocused()) {
       return;
     }
 
     // bring back focus to the field with the current view section selected
     if (currentView) {
-      const sections = startFieldRef.current.getSections().map(section => section.type);
+      const sections = singleInputFieldRef.current.getSections().map(section => section.type);
       const newSelectedSection = rangePosition === 'start' ? sections.indexOf(currentView) : sections.lastIndexOf(currentView);
-      startFieldRef.current?.focusField(newSelectedSection);
+      singleInputFieldRef.current?.focusField(newSelectedSection);
     }
-  }, [rangePosition, open, currentView, startFieldRef, variant]);
+  }, [rangePosition, open, currentView, singleInputFieldRef, variant]);
   const updateRangePosition = () => {
-    if (!startFieldRef.current?.isFieldFocused()) {
+    if (!singleInputFieldRef.current?.isFieldFocused()) {
       return;
     }
-    const sections = startFieldRef.current.getSections();
-    const activeSectionIndex = startFieldRef.current?.getActiveSectionIndex();
+    const sections = singleInputFieldRef.current.getSections();
+    const activeSectionIndex = singleInputFieldRef.current?.getActiveSectionIndex();
     const domRangePosition = activeSectionIndex == null || activeSectionIndex < sections.length / 2 ? 'start' : 'end';
     if (domRangePosition != null && domRangePosition !== rangePosition) {
       onRangePositionChange(domRangePosition);