@mui/x-date-pickers-pro 6.0.2 → 6.0.4

package/internal/hooks/useMobileRangePicker/useMobileRangePicker.types.d.ts

@@ -1,34 +1,15 @@
-import * as React from 'react';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
-import Stack, { StackProps } from '@mui/material/Stack';
-import Typography, { TypographyProps } from '@mui/material/Typography';
-import { SlotComponentProps } from '@mui/base/utils';
-import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponentsProps } from '@mui/x-date-pickers/PickersLayout/PickersLayout.types';
-import { DateOrTimeView, UsePickerParams, BasePickerProps, PickersModalDialogSlotsComponent, PickersModalDialogSlotsComponentsProps, ExportedBaseToolbarProps, UsePickerViewsProps, UncapitalizeObjectKeys, BaseNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps } from '@mui/x-date-pickers/internals';
-import { DateRange } from '../../models';
-import { BaseMultiInputFieldProps } from '../../models/fields';
+import { UsePickerParams, BasePickerProps, PickersModalDialogSlotsComponent, PickersModalDialogSlotsComponentsProps, ExportedBaseToolbarProps, UsePickerViewsProps, UncapitalizeObjectKeys, BaseNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps } from '@mui/x-date-pickers/internals';
+import { DateOrTimeView } from '@mui/x-date-pickers/models';
+import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponentsProps } from '@mui/x-date-pickers/PickersLayout';
+import { DateRange, RangeFieldSection, BaseRangeNonStaticPickerProps } from '../../models';
 import { UseRangePositionProps, UseRangePositionResponse } from '../useRangePosition';
-export interface UseMobileRangePickerSlotsComponent<TDate, TView extends DateOrTimeView> extends PickersModalDialogSlotsComponent, ExportedPickersLayoutSlotsComponent<DateRange<TDate>, TDate, TView> {
-    Field: React.ElementType;
-    FieldRoot?: React.ElementType<StackProps>;
-    FieldSeparator?: React.ElementType<TypographyProps>;
-    /**
-     * Form control with an input to render a date or time inside the default field.
-     * Receives the same props as `@mui/material/TextField`.
-     * @default TextField from '@mui/material'
-     */
-    TextField?: React.ElementType<TextFieldProps>;
+import { RangePickerFieldSlotsComponent, RangePickerFieldSlotsComponentsProps } from '../useEnrichedRangePickerFieldProps';
+export interface UseMobileRangePickerSlotsComponent<TDate, TView extends DateOrTimeView> extends PickersModalDialogSlotsComponent, ExportedPickersLayoutSlotsComponent<DateRange<TDate>, TDate, TView>, RangePickerFieldSlotsComponent {
 }
-export interface UseMobileRangePickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends PickersModalDialogSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<DateRange<TDate>, TDate, TView> {
-    field?: SlotComponentProps<React.ElementType<BaseMultiInputFieldProps<DateRange<TDate>, unknown>>, {}, unknown>;
-    fieldRoot?: SlotComponentProps<typeof Stack, {}, unknown>;
-    fieldSeparator?: SlotComponentProps<typeof Typography, {}, unknown>;
-    textField?: SlotComponentProps<typeof TextField, {}, {
-        position?: 'start' | 'end';
-    } & Record<string, any>>;
+export interface UseMobileRangePickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends PickersModalDialogSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<DateRange<TDate>, TDate, TView>, RangePickerFieldSlotsComponentsProps<TDate> {
     toolbar?: ExportedBaseToolbarProps;
 }
-export interface MobileRangeOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null>, UsePickerViewsNonStaticProps, UseRangePositionProps {
+export interface MobileRangeOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null, RangeFieldSection>, UsePickerViewsNonStaticProps, BaseRangeNonStaticPickerProps, UseRangePositionProps {
 }
 export interface UseMobileRangePickerProps<TDate, TView extends DateOrTimeView, TError, TExternalProps extends UsePickerViewsProps<any, TView, any, any>> extends MobileRangeOnlyPickerProps<TDate>, BasePickerProps<DateRange<TDate>, TDate, TView, TError, TExternalProps, MobileRangePickerAdditionalViewProps> {
     /**
@@ -42,8 +23,8 @@ export interface UseMobileRangePickerProps<TDate, TView extends DateOrTimeView,
      */
     slotProps?: UseMobileRangePickerSlotsComponentsProps<TDate, TView>;
 }
-export interface MobileRangePickerAdditionalViewProps extends UseRangePositionResponse {
+export interface MobileRangePickerAdditionalViewProps extends Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
 }
-export interface UseMobileRangePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseMobileRangePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, TExternalProps, MobileRangePickerAdditionalViewProps>, 'valueManager' | 'validator'> {
+export interface UseMobileRangePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseMobileRangePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, RangeFieldSection, TExternalProps, MobileRangePickerAdditionalViewProps>, 'valueManager' | 'validator'> {
     props: TExternalProps;
 }

package/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.d.ts

@@ -1,4 +1,3 @@
-import { UseDateFieldProps } from '@mui/x-date-pickers/DateField';
 import { UseMultiInputDateRangeFieldParams } from '../../../MultiInputDateRangeField/MultiInputDateRangeField.types';
 import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types';
-export declare const useMultiInputDateRangeField: <TDate, TChildProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps: inStartTextFieldProps, endTextFieldProps: inEndTextFieldProps, startInputRef, endInputRef, }: UseMultiInputDateRangeFieldParams<TDate, TChildProps>) => UseMultiInputRangeFieldResponse<Omit<TChildProps, keyof UseDateFieldProps<TDate>>>;
+export declare const useMultiInputDateRangeField: <TDate, TTextFieldSlotProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, startInputRef, unstableStartFieldRef, endTextFieldProps, endInputRef, unstableEndFieldRef, }: UseMultiInputDateRangeFieldParams<TDate, TTextFieldSlotProps>) => UseMultiInputRangeFieldResponse<TTextFieldSlotProps>;

package/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js

@@ -9,10 +9,12 @@ import { validateDateRange } from '../validation/useDateRangeValidation';
 import { rangeValueManager } from '../../utils/valueManagers';
 export const useMultiInputDateRangeField = ({
   sharedProps: inSharedProps,
-  startTextFieldProps: inStartTextFieldProps,
-  endTextFieldProps: inEndTextFieldProps,
+  startTextFieldProps,
   startInputRef,
-  endInputRef
+  unstableStartFieldRef,
+  endTextFieldProps,
+  endInputRef,
+  unstableEndFieldRef
 }) => {
   var _firstDefaultValue$cu;
   const sharedProps = useDefaultizedDateRangeFieldProps(inSharedProps);
@@ -23,7 +25,9 @@ export const useMultiInputDateRangeField = ({
     format,
     onChange,
     disabled,
-    readOnly
+    readOnly,
+    selectedSections,
+    onSelectedSectionsChange
   } = sharedProps;
   const firstDefaultValue = React.useRef(defaultValue);
   const [value, setValue] = useControlled({
@@ -42,9 +46,7 @@ export const useMultiInputDateRangeField = ({
         validationError: validateDateRange({
           adapter,
           value: newDateRange,
-          props: _extends({}, sharedProps, {
-            value: newDateRange
-          })
+          props: sharedProps
         })
       });
       onChange == null ? void 0 : onChange(newDateRange, context);
@@ -55,32 +57,38 @@ export const useMultiInputDateRangeField = ({
   const validationError = useValidation(_extends({}, sharedProps, {
     value
   }), validateDateRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
-  const startInputProps = _extends({
+  const startFieldProps = _extends({
     error: !!validationError[0]
-  }, inStartTextFieldProps, {
+  }, startTextFieldProps, {
     disabled,
     readOnly,
     format,
+    unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
-    onChange: handleStartDateChange
+    onChange: handleStartDateChange,
+    selectedSections,
+    onSelectedSectionsChange
   });
-  const endInputProps = _extends({
+  const endFieldProps = _extends({
     error: !!validationError[1]
-  }, inEndTextFieldProps, {
+  }, endTextFieldProps, {
     format,
     disabled,
     readOnly,
+    unstableFieldRef: unstableEndFieldRef,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
-    onChange: handleEndDateChange
+    onChange: handleEndDateChange,
+    selectedSections,
+    onSelectedSectionsChange
   });
   const startDateResponse = useDateField({
-    props: startInputProps,
+    props: startFieldProps,
     inputRef: startInputRef
   });
   const endDateResponse = useDateField({
-    props: endInputProps,
+    props: endFieldProps,
     inputRef: endInputRef
   });
   return {

package/internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.d.ts

@@ -1,5 +1,4 @@
-import { UseDateTimeFieldProps } from '@mui/x-date-pickers/DateTimeField';
 import type { UseMultiInputDateTimeRangeFieldDefaultizedProps, UseMultiInputDateTimeRangeFieldParams, UseMultiInputDateTimeRangeFieldProps } from '../../../MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types';
 import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types';
 export declare const useDefaultizedDateTimeRangeFieldProps: <TDate, AdditionalProps extends {}>(props: UseMultiInputDateTimeRangeFieldProps<TDate>) => UseMultiInputDateTimeRangeFieldDefaultizedProps<TDate, AdditionalProps>;
-export declare const useMultiInputDateTimeRangeField: <TDate, TChildProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps: inStartTextFieldProps, endTextFieldProps: inEndTextFieldProps, startInputRef, endInputRef, }: UseMultiInputDateTimeRangeFieldParams<TDate, TChildProps>) => UseMultiInputRangeFieldResponse<Omit<TChildProps, keyof UseDateTimeFieldProps<TDate>>>;
+export declare const useMultiInputDateTimeRangeField: <TDate, TTextFieldSlotProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, startInputRef, unstableStartFieldRef, endTextFieldProps, endInputRef, unstableEndFieldRef, }: UseMultiInputDateTimeRangeFieldParams<TDate, TTextFieldSlotProps>) => UseMultiInputRangeFieldResponse<TTextFieldSlotProps>;

package/internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js

@@ -25,10 +25,12 @@ export const useDefaultizedDateTimeRangeFieldProps = props => {
 };
 export const useMultiInputDateTimeRangeField = ({
   sharedProps: inSharedProps,
-  startTextFieldProps: inStartTextFieldProps,
-  endTextFieldProps: inEndTextFieldProps,
+  startTextFieldProps,
   startInputRef,
-  endInputRef
+  unstableStartFieldRef,
+  endTextFieldProps,
+  endInputRef,
+  unstableEndFieldRef
 }) => {
   var _firstDefaultValue$cu;
   const sharedProps = useDefaultizedDateTimeRangeFieldProps(inSharedProps);
@@ -58,9 +60,7 @@ export const useMultiInputDateTimeRangeField = ({
         validationError: validateDateTimeRange({
           adapter,
           value: newDateRange,
-          props: _extends({}, sharedProps, {
-            value: newDateRange
-          })
+          props: sharedProps
         })
       });
       onChange == null ? void 0 : onChange(newDateRange, context);
@@ -71,32 +71,34 @@ export const useMultiInputDateTimeRangeField = ({
   const validationError = useValidation(_extends({}, sharedProps, {
     value
   }), validateDateTimeRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
-  const startInputProps = _extends({
+  const startFieldProps = _extends({
     error: !!validationError[0]
-  }, inStartTextFieldProps, {
+  }, startTextFieldProps, {
     format,
     disabled,
     readOnly,
+    unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange
   });
-  const endInputProps = _extends({
+  const endFieldProps = _extends({
     error: !!validationError[1]
-  }, inEndTextFieldProps, {
+  }, endTextFieldProps, {
     format,
     disabled,
     readOnly,
+    unstableFieldRef: unstableEndFieldRef,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange
   });
   const startDateResponse = useDateTimeField({
-    props: startInputProps,
+    props: startFieldProps,
     inputRef: startInputRef
   });
   const endDateResponse = useDateTimeField({
-    props: endInputProps,
+    props: endFieldProps,
     inputRef: endInputRef
   });
   return {

package/internal/hooks/useMultiInputRangeField/useMultiInputRangeField.types.d.ts

@@ -1,5 +1,17 @@
-import { UseFieldResponse, UseFieldForwardedProps } from '@mui/x-date-pickers/internals';
-export interface UseMultiInputRangeFieldResponse<TForwardedProps extends UseFieldForwardedProps> {
+import * as React from 'react';
+import { FieldRef } from '@mui/x-date-pickers/models';
+import { UseFieldResponse } from '@mui/x-date-pickers/internals';
+import { RangeFieldSection } from '../../models/fields';
+export interface UseMultiInputRangeFieldParams<TSharedProps extends {}, TTextFieldSlotProps extends {}> {
+    sharedProps: TSharedProps;
+    startTextFieldProps: TTextFieldSlotProps;
+    startInputRef?: React.Ref<HTMLInputElement>;
+    unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
+    endTextFieldProps: TTextFieldSlotProps;
+    endInputRef?: React.Ref<HTMLInputElement>;
+    unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
+}
+export interface UseMultiInputRangeFieldResponse<TForwardedProps extends {}> {
     startDate: UseFieldResponse<TForwardedProps>;
     endDate: UseFieldResponse<TForwardedProps>;
 }

package/internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.d.ts

@@ -1,5 +1,4 @@
-import { UseTimeFieldProps } from '@mui/x-date-pickers/TimeField';
 import type { UseMultiInputTimeRangeFieldDefaultizedProps, UseMultiInputTimeRangeFieldParams, UseMultiInputTimeRangeFieldProps } from '../../../MultiInputTimeRangeField/MultiInputTimeRangeField.types';
 import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types';
 export declare const useDefaultizedTimeRangeFieldProps: <TDate, AdditionalProps extends {}>(props: UseMultiInputTimeRangeFieldProps<TDate>) => UseMultiInputTimeRangeFieldDefaultizedProps<TDate, AdditionalProps>;
-export declare const useMultiInputTimeRangeField: <TDate, TChildProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps: inStartTextFieldProps, endTextFieldProps: inEndTextFieldProps, startInputRef, endInputRef, }: UseMultiInputTimeRangeFieldParams<TDate, TChildProps>) => UseMultiInputRangeFieldResponse<Omit<TChildProps, keyof UseTimeFieldProps<TDate>>>;
+export declare const useMultiInputTimeRangeField: <TDate, TTextFieldSlotProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, startInputRef, unstableStartFieldRef, endTextFieldProps, endInputRef, unstableEndFieldRef, }: UseMultiInputTimeRangeFieldParams<TDate, TTextFieldSlotProps>) => UseMultiInputRangeFieldResponse<TTextFieldSlotProps>;

package/internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js

@@ -19,10 +19,12 @@ export const useDefaultizedTimeRangeFieldProps = props => {
 };
 export const useMultiInputTimeRangeField = ({
   sharedProps: inSharedProps,
-  startTextFieldProps: inStartTextFieldProps,
-  endTextFieldProps: inEndTextFieldProps,
+  startTextFieldProps,
   startInputRef,
-  endInputRef
+  unstableStartFieldRef,
+  endTextFieldProps,
+  endInputRef,
+  unstableEndFieldRef
 }) => {
   var _firstDefaultValue$cu;
   const sharedProps = useDefaultizedTimeRangeFieldProps(inSharedProps);
@@ -52,9 +54,7 @@ export const useMultiInputTimeRangeField = ({
         validationError: validateTimeRange({
           adapter,
           value: newDateRange,
-          props: _extends({}, sharedProps, {
-            value: newDateRange
-          })
+          props: sharedProps
         })
       });
       onChange == null ? void 0 : onChange(newDateRange, context);
@@ -65,32 +65,34 @@ export const useMultiInputTimeRangeField = ({
   const validationError = useValidation(_extends({}, sharedProps, {
     value
   }), validateTimeRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
-  const startInputProps = _extends({
+  const startFieldProps = _extends({
     error: !!validationError[0]
-  }, inStartTextFieldProps, {
+  }, startTextFieldProps, {
     format,
     disabled,
     readOnly,
+    unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange
   });
-  const endInputProps = _extends({
+  const endFieldProps = _extends({
     error: !!validationError[1]
-  }, inEndTextFieldProps, {
+  }, endTextFieldProps, {
     format,
     disabled,
     readOnly,
+    unstableFieldRef: unstableEndFieldRef,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange
   });
   const startDateResponse = useTimeField({
-    props: startInputProps,
+    props: startFieldProps,
     inputRef: startInputRef
   });
   const endDateResponse = useTimeField({
-    props: endInputProps,
+    props: endFieldProps,
     inputRef: endInputRef
   });
   return {

package/internal/hooks/useRangePosition.d.ts

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

package/internal/hooks/useRangePosition.js

@@ -1,20 +1,35 @@
+import * as React from 'react';
 import useControlled from '@mui/utils/useControlled';
 import useEventCallback from '@mui/utils/useEventCallback';
 export const useRangePosition = props => {
   var _props$defaultRangePo;
+  const singleInputFieldRef = React.useRef();
   const [rangePosition, setRangePosition] = useControlled({
     name: 'useRangePosition',
     state: 'rangePosition',
     controlled: props.rangePosition,
     default: (_props$defaultRangePo = props.defaultRangePosition) != null ? _props$defaultRangePo : 'start'
   });
+
+  // When using a single input field,
+  // we want to select the 1st section of the edited date when updating the range position.
+  const syncRangePositionWithSingleInputField = newRangePosition => {
+    if (singleInputFieldRef.current == null) {
+      return;
+    }
+    const sections = singleInputFieldRef.current.getSections();
+    const targetActiveSectionIndex = newRangePosition === 'start' ? 0 : sections.length / 2;
+    singleInputFieldRef.current.setSelectedSections(targetActiveSectionIndex);
+  };
   const handleRangePositionChange = useEventCallback(newRangePosition => {
     var _props$onRangePositio;
     setRangePosition(newRangePosition);
     (_props$onRangePositio = props.onRangePositionChange) == null ? void 0 : _props$onRangePositio.call(props, newRangePosition);
+    syncRangePositionWithSingleInputField(newRangePosition);
   });
   return {
     rangePosition,
-    onRangePositionChange: handleRangePositionChange
+    onRangePositionChange: handleRangePositionChange,
+    singleInputFieldRef
   };
 };

package/internal/hooks/useStaticRangePicker/useStaticRangePicker.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DateOrTimeView } from '@mui/x-date-pickers/internals';
+import { DateOrTimeView } from '@mui/x-date-pickers/models';
 import { UseStaticRangePickerParams, UseStaticRangePickerProps } from './useStaticRangePicker.types';
 /**
  * Hook managing all the range static pickers:

package/internal/hooks/useStaticRangePicker/useStaticRangePicker.types.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponentsProps } from '@mui/x-date-pickers/PickersLayout/PickersLayout.types';
-import { DateOrTimeView, BasePickerProps, UsePickerParams, ExportedBaseToolbarProps, StaticOnlyPickerProps, UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
+import { BasePickerProps, UsePickerParams, ExportedBaseToolbarProps, StaticOnlyPickerProps, UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
+import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponentsProps } from '@mui/x-date-pickers/PickersLayout';
+import { DateOrTimeView } from '@mui/x-date-pickers/models';
 import { DateRange } from '../../models/range';
 import { UseRangePositionProps } from '../useRangePosition';
+import { RangeFieldSection } from '../../models/fields';
 export interface UseStaticRangePickerSlotsComponent<TDate, TView extends DateOrTimeView> extends ExportedPickersLayoutSlotsComponent<DateRange<TDate>, TDate, TView> {
 }
 export interface UseStaticRangePickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends ExportedPickersLayoutSlotsComponentsProps<DateRange<TDate>, TDate, TView> {
@@ -22,7 +24,7 @@ export interface UseStaticRangePickerProps<TDate, TView extends DateOrTimeView,
      */
     slotProps?: UseStaticRangePickerSlotsComponentsProps<TDate, TView>;
 }
-export interface UseStaticRangePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, TExternalProps, {}>, 'valueManager' | 'validator'> {
+export interface UseStaticRangePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, RangeFieldSection, TExternalProps, {}>, 'valueManager' | 'validator'> {
     props: TExternalProps;
     /**
      * Ref to pass to the root element

package/internal/hooks/validation/useDateRangeValidation.d.ts

@@ -1,4 +1,5 @@
-import { Validator, DateValidationError, BaseDateValidationProps } from '@mui/x-date-pickers/internals';
+import { Validator, BaseDateValidationProps } from '@mui/x-date-pickers/internals';
+import { DateValidationError } from '@mui/x-date-pickers/models';
 import { DateRange, DayRangeValidationProps } from '../../models';
 export interface DateRangeComponentValidationProps<TDate> extends DayRangeValidationProps<TDate>, Required<BaseDateValidationProps<TDate>> {
 }

package/internal/hooks/validation/useDateTimeRangeValidation.d.ts

@@ -1,4 +1,5 @@
-import { Validator, DateTimeValidationError, BaseDateValidationProps, TimeValidationProps, ValidationProps } from '@mui/x-date-pickers/internals';
+import { Validator, BaseDateValidationProps, TimeValidationProps, ValidationProps } from '@mui/x-date-pickers/internals';
+import { DateTimeValidationError } from '@mui/x-date-pickers/models';
 import { DayRangeValidationProps } from '../../models/dateRange';
 import { DateRange } from '../../models/range';
 export interface DateTimeRangeComponentValidationProps<TDate> extends DayRangeValidationProps<TDate>, TimeValidationProps<TDate>, Required<BaseDateValidationProps<TDate>> {

package/internal/hooks/validation/useTimeRangeValidation.d.ts

@@ -1,4 +1,5 @@
-import { Validator, TimeValidationError, BaseTimeValidationProps, ValidationProps } from '@mui/x-date-pickers/internals';
+import { Validator, BaseTimeValidationProps, ValidationProps } from '@mui/x-date-pickers/internals';
+import { TimeValidationError } from '@mui/x-date-pickers/models';
 import { DateRange } from '../../models/range';
 export interface TimeRangeComponentValidationProps extends Required<BaseTimeValidationProps> {
 }

package/internal/models/dateRange.d.ts

@@ -1,6 +1,7 @@
 import { BaseDateValidationProps, DefaultizedProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
 import { DateRange } from './range';
 import type { DateRangeValidationError } from '../hooks/validation/useDateRangeValidation';
+import { RangeFieldSection } from './fields';
 /**
  * Props used to validate a day value in range pickers.
  */
@@ -24,6 +25,6 @@ export interface BaseRangeProps {
      */
     disabled?: boolean;
 }
-export interface UseDateRangeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, DateRangeValidationError>, 'format'>, DayRangeValidationProps<TDate>, BaseDateValidationProps<TDate>, BaseRangeProps {
+export interface UseDateRangeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, RangeFieldSection, DateRangeValidationError>, 'format'>, DayRangeValidationProps<TDate>, BaseDateValidationProps<TDate>, BaseRangeProps {
 }
 export type UseDateRangeFieldDefaultizedProps<TDate> = DefaultizedProps<UseDateRangeFieldProps<TDate>, keyof BaseDateValidationProps<TDate> | 'format'>;

package/internal/models/dateTimeRange.d.ts

@@ -2,7 +2,8 @@ import { BaseDateValidationProps, TimeValidationProps, DefaultizedProps, MakeOpt
 import { BaseRangeProps, DayRangeValidationProps } from './dateRange';
 import { DateRange } from './range';
 import { DateTimeRangeValidationError } from '../hooks/validation/useDateTimeRangeValidation';
-export interface UseDateTimeRangeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, DateTimeRangeValidationError>, 'format'>, DayRangeValidationProps<TDate>, TimeValidationProps<TDate>, BaseDateValidationProps<TDate>, BaseRangeProps {
+import { RangeFieldSection } from './fields';
+export interface UseDateTimeRangeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, RangeFieldSection, DateTimeRangeValidationError>, 'format'>, DayRangeValidationProps<TDate>, TimeValidationProps<TDate>, BaseDateValidationProps<TDate>, BaseRangeProps {
     /**
      * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.
      */

package/internal/models/fields.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/base/utils';
-import { BaseFieldProps, FieldSection } from '@mui/x-date-pickers/internals';
+import { BaseFieldProps } from '@mui/x-date-pickers/internals';
+import { FieldSection } from '@mui/x-date-pickers/models';
 export interface RangeFieldSection extends FieldSection {
     dateName: 'start' | 'end';
 }
@@ -27,8 +28,12 @@ export interface MultiInputFieldSlotRootProps {
  * Props the multi input field can receive when used inside a picker.
  * Only contains what the MUI component are passing to the field, not what users can pass using the `props.slotProps.field`.
  */
-export interface BaseMultiInputFieldProps<TValue, TError> extends BaseFieldProps<TValue, TError> {
-    slots?: {};
+export interface BaseMultiInputFieldProps<TValue, TSection extends FieldSection, TError> extends BaseFieldProps<TValue, TSection, TError> {
+    slots?: {
+        root?: React.ElementType;
+        separator?: React.ElementType;
+        textField?: React.ElementType;
+    };
     slotProps?: {
         root?: SlotComponentProps<React.ElementType<MultiInputFieldSlotRootProps>, {}, Record<string, any>>;
         textField?: SlotComponentProps<React.ElementType<MultiInputFieldSlotTextFieldProps>, {}, {

package/internal/models/index.d.ts

@@ -3,3 +3,4 @@ export * from './range';
 export * from './dateTimeRange';
 export * from './timeRange';
 export * from './fields';
+export * from './rangePickerProps';

package/internal/models/index.js

@@ -2,4 +2,5 @@ export * from './dateRange';
 export * from './range';
 export * from './dateTimeRange';
 export * from './timeRange';
-export * from './fields';
+export * from './fields';
+export * from './rangePickerProps';

package/internal/models/rangePickerProps.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+/**
+ * Props common to all range non-static pickers.
+ * These props are handled by the headless wrappers.
+ */
+export interface BaseRangeNonStaticPickerProps {
+    /**
+     * The label content.
+     * Ignored if the field has several inputs.
+     */
+    label?: React.ReactNode;
+    /**
+     * Pass a ref to the `input` element.
+     * Ignored if the field has several inputs.
+     */
+    inputRef?: React.Ref<HTMLInputElement>;
+}

package/internal/models/rangePickerProps.js

@@ -0,0 +1 @@
+export {};

package/internal/models/timeRange.d.ts

@@ -2,7 +2,8 @@ import { BaseTimeValidationProps, TimeValidationProps, DefaultizedProps, MakeOpt
 import { DateRange } from './range';
 import { TimeRangeValidationError } from '../hooks/validation/useTimeRangeValidation';
 import { BaseRangeProps } from './dateRange';
-export interface UseTimeRangeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, TimeRangeValidationError>, 'format'>, TimeValidationProps<TDate>, BaseTimeValidationProps, BaseRangeProps {
+import { RangeFieldSection } from './fields';
+export interface UseTimeRangeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, RangeFieldSection, TimeRangeValidationError>, 'format'>, TimeValidationProps<TDate>, BaseTimeValidationProps, BaseRangeProps {
     /**
      * 12h/24h view for hour selection clock.
      * @default `utils.is12HourCycleInCurrentLocale()`

package/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY3ODkxNzYwMDAwMA==";
+  const releaseInfo = "MTY4MDEyNzIwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat