@mui/x-date-pickers-pro 8.0.0-alpha.0 → 8.0.0-alpha.2

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.0
+ * @mui/x-date-pickers-pro v8.0.0-alpha.2
  *
  * @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,
@@ -60,9 +69,9 @@ export const useDesktopRangePicker = _ref => {
     ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
-    wrapperVariant: 'desktop',
+    variant: 'desktop',
     autoFocusView: false,
-    fieldRef: rangePosition === 'start' ? startFieldRef : endFieldRef,
+    fieldRef,
     localeText,
     additionalViewProps: {
       rangePosition,
@@ -113,7 +122,7 @@ export const useDesktopRangePicker = _ref => {
     ownerState
   });
   const enrichedFieldProps = useEnrichedRangePickerFieldProps({
-    wrapperVariant: 'desktop',
+    variant: 'desktop',
     fieldType,
     open,
     actions,
@@ -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, WrapperVariant, 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,16 +31,16 @@ 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 {
-    wrapperVariant: WrapperVariant;
+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;
     labelId?: string;
@@ -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

@@ -8,7 +8,7 @@ import useForkRef from '@mui/utils/useForkRef';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { onSpaceOrEnter } from '@mui/x-date-pickers/internals';
 const useMultiInputFieldSlotProps = ({
-  wrapperVariant,
+  variant,
   open,
   actions,
   readOnly,
@@ -33,7 +33,7 @@ const useMultiInputFieldSlotProps = ({
   const handleEndFieldRef = useForkRef(fieldProps.unstableEndFieldRef, endFieldRef);
   const previousRangePosition = React.useRef(rangePosition);
   React.useEffect(() => {
-    if (!open) {
+    if (!open || variant === 'mobile') {
       return;
     }
     const currentFieldRef = rangePosition === 'start' ? startFieldRef : endFieldRef;
@@ -49,7 +49,7 @@ const useMultiInputFieldSlotProps = ({
     // use the current view or `0` when the range position has just been swapped
     previousRangePosition.current === rangePosition ? currentView : 0);
     previousRangePosition.current = rangePosition;
-  }, [rangePosition, open, currentView, startFieldRef, endFieldRef]);
+  }, [rangePosition, open, currentView, startFieldRef, endFieldRef, variant]);
   const openRangeStartSelection = event => {
     event.stopPropagation();
     onRangePositionChange('start');
@@ -98,7 +98,7 @@ const useMultiInputFieldSlotProps = ({
           focused: open ? rangePosition === 'start' : undefined
         }, !readOnly && !fieldProps.disabled && {
           onClick: openRangeStartSelection
-        }, wrapperVariant === 'mobile' && {
+        }, variant === 'mobile' && {
           readOnly: true
         });
         if (anchorRef) {
@@ -114,7 +114,7 @@ const useMultiInputFieldSlotProps = ({
           focused: open ? rangePosition === 'end' : undefined
         }, !readOnly && !fieldProps.disabled && {
           onClick: openRangeEndSelection
-        }, wrapperVariant === 'mobile' && {
+        }, variant === 'mobile' && {
           readOnly: true
         });
         InputProps = resolvedComponentProps?.InputProps;
@@ -146,7 +146,7 @@ const useMultiInputFieldSlotProps = ({
   return enrichedFieldProps;
 };
 const useSingleInputFieldSlotProps = ({
-  wrapperVariant,
+  variant,
   open,
   actions,
   readOnly,
@@ -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) {
+    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]);
+  }, [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);
@@ -225,7 +224,7 @@ const useSingleInputFieldSlotProps = ({
     focused: open ? true : undefined
   }, labelId != null && {
     id: labelId
-  }, wrapperVariant === 'mobile' && {
+  }, variant === 'mobile' && {
     readOnly: true
   }, !readOnly && !fieldProps.disabled && {
     onClick: openPicker

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -40,13 +40,22 @@ export const useMobileRangePicker = _ref => {
   } = props;
   const startFieldRef = React.useRef(null);
   const endFieldRef = React.useRef(null);
+  const singleInputFieldRef = React.useRef(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);
   const labelId = useId();
   const contextTranslations = usePickerTranslations();
+  let fieldRef;
+  if (fieldType === 'single-input') {
+    fieldRef = singleInputFieldRef;
+  } else if (rangePosition === 'start') {
+    fieldRef = startFieldRef;
+  } else {
+    fieldRef = endFieldRef;
+  }
   const {
     open,
     actions,
@@ -57,9 +66,9 @@ export const useMobileRangePicker = _ref => {
     ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
-    wrapperVariant: 'mobile',
+    variant: 'mobile',
     autoFocusView: true,
-    fieldRef: rangePosition === 'start' ? startFieldRef : endFieldRef,
+    fieldRef,
     localeText,
     additionalViewProps: {
       rangePosition,
@@ -95,7 +104,7 @@ export const useMobileRangePicker = _ref => {
   });
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const enrichedFieldProps = useEnrichedRangePickerFieldProps({
-    wrapperVariant: 'mobile',
+    variant: 'mobile',
     fieldType,
     open,
     actions,
@@ -110,7 +119,8 @@ export const useMobileRangePicker = _ref => {
     pickerSlotProps: innerSlotProps,
     fieldProps,
     startFieldRef,
-    endFieldRef
+    endFieldRef,
+    singleInputFieldRef
   });
   const slotPropsForLayout = _extends({}, innerSlotProps, {
     tabs: _extends({}, innerSlotProps?.tabs, {

package/internals/hooks/useMultiInputFieldSelectedSections.d.ts

@@ -1,19 +1,18 @@
 import * as React from 'react';
-import { UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { PickerRangeValue, PickerValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
 import { FieldRef, FieldSelectedSections } from '@mui/x-date-pickers/models';
-import { RangeFieldSection } from '../../models';
-interface UseMultiInputFieldSelectedSectionsParams extends Pick<UseFieldInternalProps<any, RangeFieldSection, any, any>, 'selectedSections' | 'onSelectedSectionsChange'> {
-    unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
-    unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
+interface UseMultiInputFieldSelectedSectionsParams extends Pick<UseFieldInternalProps<PickerRangeValue, any, any>, 'selectedSections' | 'onSelectedSectionsChange'> {
+    unstableStartFieldRef?: React.Ref<FieldRef<PickerValue>>;
+    unstableEndFieldRef?: React.Ref<FieldRef<PickerValue>>;
 }
 export declare const useMultiInputFieldSelectedSections: (params: UseMultiInputFieldSelectedSectionsParams) => {
     start: {
-        unstableFieldRef: React.Ref<FieldRef<RangeFieldSection>> | undefined;
+        unstableFieldRef: React.Ref<FieldRef<PickerValue>> | undefined;
         selectedSections: FieldSelectedSections;
         onSelectedSectionsChange: (newSelectedSections: FieldSelectedSections) => void;
     };
     end: {
-        unstableFieldRef: ((instance: FieldRef<RangeFieldSection> | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null;
+        unstableFieldRef: ((instance: FieldRef<PickerValue> | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null;
         selectedSections: FieldSelectedSections;
         onSelectedSectionsChange: (newSelectedSections: FieldSelectedSections) => void;
     };

package/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js

@@ -18,6 +18,7 @@ export const useMultiInputDateRangeField = ({
   const {
     value: valueProp,
     defaultValue,
+    referenceDate,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
@@ -39,6 +40,7 @@ export const useMultiInputDateRangeField = ({
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate,
     onChange,
     valueManager: rangeValueManager
   });

package/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js

@@ -18,6 +18,7 @@ export const useMultiInputDateTimeRangeField = ({
   const {
     value: valueProp,
     defaultValue,
+    referenceDate,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
@@ -39,6 +40,7 @@ export const useMultiInputDateTimeRangeField = ({
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate,
     onChange,
     valueManager: rangeValueManager
   });

package/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js

@@ -18,6 +18,7 @@ export const useMultiInputTimeRangeField = ({
   const {
     value: valueProp,
     defaultValue,
+    referenceDate,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
@@ -40,7 +41,8 @@ export const useMultiInputTimeRangeField = ({
     value: valueProp,
     defaultValue,
     onChange,
-    valueManager: rangeValueManager
+    valueManager: rangeValueManager,
+    referenceDate
   });
   const {
     validationError,

package/internals/hooks/useRangePosition.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { FieldRef } from '@mui/x-date-pickers/models';
-import { RangePosition, RangeFieldSection } from '../../models';
+import { PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { RangePosition } from '../../models';
 export interface UseRangePositionProps {
     /**
      * The position in the currently edited date range.
@@ -23,4 +24,4 @@ export interface UseRangePositionResponse {
     rangePosition: RangePosition;
     onRangePositionChange: (newPosition: RangePosition) => void;
 }
-export declare const useRangePosition: (props: UseRangePositionProps, singleInputFieldRef?: React.RefObject<FieldRef<RangeFieldSection>>) => UseRangePositionResponse;
+export declare const useRangePosition: (props: UseRangePositionProps, singleInputFieldRef?: React.RefObject<FieldRef<PickerRangeValue>>) => UseRangePositionResponse;

package/internals/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -52,7 +52,7 @@ export const useStaticRangePicker = _ref => {
       rangePosition,
       onRangePositionChange
     },
-    wrapperVariant: displayStaticWrapperAs
+    variant: displayStaticWrapperAs
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const slotPropsForLayout = _extends({}, slotProps, {