@mui/x-date-pickers-pro 6.0.0-alpha.11 → 6.0.0-alpha.13

package/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -12,7 +12,6 @@ const releaseInfo = getReleaseInfo();
 export const useDesktopRangePicker = ({
   props,
   valueManager,
-  viewLookup,
   validator
 }) => {
   useLicenseVerifier('x-date-pickers-pro', releaseInfo);
@@ -23,6 +22,7 @@ export const useDesktopRangePicker = ({
     format,
     readOnly,
     disabled,
+    autoFocus,
     disableOpenPicker,
     localeText
   } = props;
@@ -40,8 +40,8 @@ export const useDesktopRangePicker = ({
     props,
     valueManager,
     wrapperVariant: 'desktop',
-    viewLookup,
     validator,
+    autoFocusView: true,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange: setRangePosition
@@ -57,12 +57,13 @@ export const useDesktopRangePicker = ({
     });
   };
   const fieldSlotsProps = useRangePickerInputProps({
-    wrapperVariant: 'mobile',
+    wrapperVariant: 'desktop',
     open,
     actions,
     readOnly,
     disabled,
     disableOpenPicker,
+    localeText,
     onBlur: handleBlur,
     rangePosition,
     onRangePositionChange: setRangePosition
@@ -76,6 +77,7 @@ export const useDesktopRangePicker = ({
       disabled,
       className,
       format,
+      autoFocus: autoFocus && !props.open,
       ref: fieldRef
     }),
     ownerState: props
@@ -92,7 +94,7 @@ export const useDesktopRangePicker = ({
       const inputPropsPassedByField = resolveComponentProps((_fieldProps$component = fieldProps.componentsProps) == null ? void 0 : _fieldProps$component.input, ownerState);
       const inputPropsPassedByPicker = ownerState.position === 'start' ? fieldSlotsProps.startInput : fieldSlotsProps.endInput;
       return _extends({}, externalInputProps, inputPropsPassedByField, inputPropsPassedByPicker, {
-        inputProps: _extends({}, externalInputProps == null ? void 0 : externalInputProps.inputProps, inputPropsPassedByField == null ? void 0 : inputPropsPassedByField.inputProps, inputPropsPassedByPicker == null ? void 0 : inputPropsPassedByPicker.inputProps)
+        inputProps: _extends({}, externalInputProps == null ? void 0 : externalInputProps.inputProps, inputPropsPassedByField == null ? void 0 : inputPropsPassedByField.inputProps)
       });
     },
     root: ownerState => {

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

@@ -3,7 +3,7 @@ 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 { DateOrTimeView, UsePickerParams, BaseNextPickerProps, PickersPopperSlotsComponent, PickersPopperSlotsComponentsProps, ExportedPickersViewLayoutSlotsComponent, ExportedPickersViewLayoutSlotsComponentsProps, ExportedBaseToolbarProps, DesktopOnlyPickerProps } from '@mui/x-date-pickers/internals';
+import { DateOrTimeView, UsePickerParams, BaseNextPickerProps, PickersPopperSlotsComponent, PickersPopperSlotsComponentsProps, ExportedPickersViewLayoutSlotsComponent, ExportedPickersViewLayoutSlotsComponentsProps, ExportedBaseToolbarProps, DesktopOnlyPickerProps, UsePickerViewsProps } from '@mui/x-date-pickers/internals';
 import { DateRange, RangePositionProps } from '../../models';
 import { BaseMultiInputFieldProps } from '../../models/fields';
 export interface UseDesktopRangePickerSlotsComponent extends PickersPopperSlotsComponent, ExportedPickersViewLayoutSlotsComponent {
@@ -21,7 +21,7 @@ export interface UseDesktopRangePickerSlotsComponentsProps<TDate, TView extends
 }
 export interface DesktopRangeOnlyPickerProps<TDate> extends DesktopOnlyPickerProps<TDate> {
 }
-export interface UseDesktopRangePickerProps<TDate, TView extends DateOrTimeView, TError> extends DesktopRangeOnlyPickerProps<TDate>, BaseNextPickerProps<DateRange<TDate>, TDate, TView, TError> {
+export interface UseDesktopRangePickerProps<TDate, TView extends DateOrTimeView, TError, TExternalProps extends UsePickerViewsProps<any, TView, any, any>> extends DesktopRangeOnlyPickerProps<TDate>, BaseNextPickerProps<DateRange<TDate>, TDate, TView, TError, TExternalProps, DesktopRangePickerAdditionalViewProps> {
     /**
      * Overrideable components.
      * @default {}
@@ -33,9 +33,8 @@ export interface UseDesktopRangePickerProps<TDate, TView extends DateOrTimeView,
      */
     componentsProps?: UseDesktopRangePickerSlotsComponentsProps<TDate, TView>;
 }
-interface DesktopRangePickerAdditionalViewProps extends RangePositionProps {
+export interface DesktopRangePickerAdditionalViewProps extends RangePositionProps {
 }
-export interface UseDesktopRangePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseDesktopRangePickerProps<TDate, TView, any>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, TExternalProps, DesktopRangePickerAdditionalViewProps>, 'valueManager' | 'viewLookup' | 'validator'> {
+export interface UseDesktopRangePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseDesktopRangePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, TExternalProps, DesktopRangePickerAdditionalViewProps>, 'valueManager' | 'validator'> {
     props: TExternalProps;
 }
-export {};

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { DateOrTimeView } from '@mui/x-date-pickers/internals';
 import { UseMobileRangePickerParams, UseMobileRangePickerProps } from './useMobileRangePicker.types';
-export declare const useMobileRangePicker: <TDate, TView extends DateOrTimeView, TExternalProps extends UseMobileRangePickerProps<TDate, TView, any>>({ props, valueManager, viewLookup, validator, }: UseMobileRangePickerParams<TDate, TView, TExternalProps>) => {
+export declare const useMobileRangePicker: <TDate, TView extends DateOrTimeView, TExternalProps extends UseMobileRangePickerProps<TDate, TView, any, TExternalProps>>({ props, valueManager, validator, }: UseMobileRangePickerParams<TDate, TView, TExternalProps>) => {
     renderPicker: () => JSX.Element;
 };

package/internal/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -12,7 +12,6 @@ const releaseInfo = getReleaseInfo();
 export const useMobileRangePicker = ({
   props,
   valueManager,
-  viewLookup,
   validator
 }) => {
   useLicenseVerifier('x-date-pickers-pro', releaseInfo);
@@ -38,8 +37,8 @@ export const useMobileRangePicker = ({
     props,
     valueManager,
     wrapperVariant: 'mobile',
-    viewLookup,
     validator,
+    autoFocusView: true,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange: setRangePosition
@@ -52,6 +51,7 @@ export const useMobileRangePicker = ({
     readOnly,
     disabled,
     disableOpenPicker,
+    localeText,
     rangePosition,
     onRangePositionChange: setRangePosition
   });
@@ -60,7 +60,7 @@ export const useMobileRangePicker = ({
     elementType: Field,
     externalSlotProps: componentsProps.field,
     additionalProps: _extends({}, pickerFieldProps, {
-      readOnly,
+      readOnly: readOnly != null ? readOnly : true,
       disabled,
       className,
       format,
@@ -78,7 +78,7 @@ export const useMobileRangePicker = ({
       const inputPropsPassedByField = resolveComponentProps((_fieldProps$component = fieldProps.componentsProps) == null ? void 0 : _fieldProps$component.input, ownerState);
       const inputPropsPassedByPicker = ownerState.position === 'start' ? fieldSlotsProps.startInput : fieldSlotsProps.endInput;
       return _extends({}, externalInputProps, inputPropsPassedByField, inputPropsPassedByPicker, {
-        inputProps: _extends({}, externalInputProps == null ? void 0 : externalInputProps.inputProps, inputPropsPassedByField == null ? void 0 : inputPropsPassedByField.inputProps, inputPropsPassedByPicker == null ? void 0 : inputPropsPassedByPicker.inputProps)
+        inputProps: _extends({}, externalInputProps == null ? void 0 : externalInputProps.inputProps, inputPropsPassedByField == null ? void 0 : inputPropsPassedByField.inputProps)
       });
     },
     root: ownerState => {

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

@@ -3,7 +3,7 @@ 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 { DateOrTimeView, UsePickerParams, BaseNextPickerProps, PickersModalDialogSlotsComponent, PickersModalDialogSlotsComponentsProps, ExportedPickersViewLayoutSlotsComponent, ExportedPickersViewLayoutSlotsComponentsProps, ExportedBaseToolbarProps, MobileOnlyPickerProps } from '@mui/x-date-pickers/internals';
+import { DateOrTimeView, UsePickerParams, BaseNextPickerProps, PickersModalDialogSlotsComponent, PickersModalDialogSlotsComponentsProps, ExportedPickersViewLayoutSlotsComponent, ExportedPickersViewLayoutSlotsComponentsProps, ExportedBaseToolbarProps, MobileOnlyPickerProps, UsePickerViewsProps } from '@mui/x-date-pickers/internals';
 import { DateRange, RangePositionProps } from '../../models';
 import { BaseMultiInputFieldProps } from '../../models/fields';
 export interface UseMobileRangePickerSlotsComponent extends PickersModalDialogSlotsComponent, ExportedPickersViewLayoutSlotsComponent {
@@ -21,7 +21,7 @@ export interface UseMobileRangePickerSlotsComponentsProps<TDate, TView extends D
 }
 export interface MobileRangeOnlyPickerProps<TDate> extends MobileOnlyPickerProps<TDate> {
 }
-export interface UseMobileRangePickerProps<TDate, TView extends DateOrTimeView, TError> extends MobileRangeOnlyPickerProps<TDate>, BaseNextPickerProps<DateRange<TDate>, TDate, TView, TError> {
+export interface UseMobileRangePickerProps<TDate, TView extends DateOrTimeView, TError, TExternalProps extends UsePickerViewsProps<any, TView, any, any>> extends MobileRangeOnlyPickerProps<TDate>, BaseNextPickerProps<DateRange<TDate>, TDate, TView, TError, TExternalProps, MobileRangePickerAdditionalViewProps> {
     /**
      * Overrideable components.
      * @default {}
@@ -33,9 +33,8 @@ export interface UseMobileRangePickerProps<TDate, TView extends DateOrTimeView,
      */
     componentsProps?: UseMobileRangePickerSlotsComponentsProps<TDate, TView>;
 }
-interface MobileRangePickerAdditionalViewProps extends RangePositionProps {
+export interface MobileRangePickerAdditionalViewProps extends RangePositionProps {
 }
-export interface UseMobileRangePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseMobileRangePickerProps<TDate, TView, any>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, TExternalProps, MobileRangePickerAdditionalViewProps>, 'valueManager' | 'viewLookup' | 'validator'> {
+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'> {
     props: TExternalProps;
 }
-export {};

package/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js

@@ -20,7 +20,9 @@ export const useMultiInputDateRangeField = ({
     value: valueProp,
     defaultValue,
     format,
-    onChange
+    onChange,
+    disabled,
+    readOnly
   } = sharedProps;
   const firstDefaultValue = React.useRef(defaultValue);
 
@@ -48,6 +50,8 @@ export const useMultiInputDateRangeField = ({
   const handleStartDateChange = useEventCallback(buildChangeHandler(0));
   const handleEndDateChange = useEventCallback(buildChangeHandler(1));
   const startInputProps = _extends({}, inStartInputProps, {
+    disabled,
+    readOnly,
     format,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
@@ -55,6 +59,8 @@ export const useMultiInputDateRangeField = ({
   });
   const endInputProps = _extends({}, inEndInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange

package/internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js

@@ -36,7 +36,9 @@ export const useMultiInputDateTimeRangeField = ({
     value: valueProp,
     defaultValue,
     format,
-    onChange
+    onChange,
+    disabled,
+    readOnly
   } = sharedProps;
   const firstDefaultValue = React.useRef(defaultValue);
 
@@ -65,12 +67,16 @@ export const useMultiInputDateTimeRangeField = ({
   const handleEndDateChange = useEventCallback(buildChangeHandler(1));
   const startInputProps = _extends({}, inStartInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange
   });
   const endInputProps = _extends({}, inEndInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange

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

@@ -2,8 +2,10 @@ import { UseFieldResponse } from '@mui/x-date-pickers/internals';
 export interface UseMultiInputRangeFieldResponse<TChildProps extends {}> {
     startDate: UseFieldResponse<TChildProps> & {
         error: boolean;
+        readOnly: boolean;
     };
     endDate: UseFieldResponse<TChildProps> & {
         error: boolean;
+        readOnly: boolean;
     };
 }

package/internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js

@@ -32,7 +32,9 @@ export const useMultiInputTimeRangeField = ({
     value: valueProp,
     defaultValue,
     format,
-    onChange
+    onChange,
+    disabled,
+    readOnly
   } = sharedProps;
   const firstDefaultValue = React.useRef(defaultValue);
 
@@ -61,12 +63,16 @@ export const useMultiInputTimeRangeField = ({
   const handleEndDateChange = useEventCallback(buildChangeHandler(1));
   const startInputProps = _extends({}, inStartInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange
   });
   const endInputProps = _extends({}, inEndInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange

package/internal/hooks/useRangePickerInputProps.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { PickersInputLocaleText } from '@mui/x-date-pickers';
 import { DateOrTimeView, UsePickerResponse, WrapperVariant } from '@mui/x-date-pickers/internals';
 import { DateRange, RangePosition } from '../models';
 interface UseRangePickerFieldParams<TDate, TView extends DateOrTimeView> extends Pick<UsePickerResponse<DateRange<TDate>, TView, any>, 'open' | 'actions'> {
@@ -9,12 +10,12 @@ interface UseRangePickerFieldParams<TDate, TView extends DateOrTimeView> extends
     onBlur?: () => void;
     rangePosition: RangePosition;
     onRangePositionChange: (newPosition: RangePosition) => void;
+    localeText: PickersInputLocaleText<TDate> | undefined;
 }
-export declare const useRangePickerInputProps: <TDate, TView extends DateOrTimeView>({ wrapperVariant, open, actions, readOnly, disabled, disableOpenPicker, onBlur, rangePosition, onRangePositionChange, }: UseRangePickerFieldParams<TDate, TView>) => {
+export declare const useRangePickerInputProps: <TDate, TView extends DateOrTimeView>({ wrapperVariant, open, actions, readOnly, disabled, disableOpenPicker, onBlur, rangePosition, onRangePositionChange, localeText: inLocaleText, }: UseRangePickerFieldParams<TDate, TView>) => {
     startInput: {
-        inputProps: {
-            readOnly: boolean;
-        };
+        readOnly: boolean;
+        disabled: boolean | undefined;
         onClick?: ((event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void) | undefined;
         inputRef: React.RefObject<HTMLInputElement>;
         label: string;
@@ -23,9 +24,8 @@ export declare const useRangePickerInputProps: <TDate, TView extends DateOrTimeV
         focused: boolean | undefined;
     };
     endInput: {
-        inputProps: {
-            readOnly: boolean;
-        };
+        readOnly: boolean;
+        disabled: boolean | undefined;
         onClick?: ((event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void) | undefined;
         inputRef: React.RefObject<HTMLInputElement>;
         label: string;

package/internal/hooks/useRangePickerInputProps.js

@@ -10,8 +10,10 @@ export const useRangePickerInputProps = ({
   disableOpenPicker,
   onBlur,
   rangePosition,
-  onRangePositionChange
+  onRangePositionChange,
+  localeText: inLocaleText
 }) => {
+  var _inLocaleText$start, _inLocaleText$end;
   const localeText = useLocaleText();
   const startRef = React.useRef(null);
   const endRef = React.useRef(null);
@@ -28,14 +30,14 @@ export const useRangePickerInputProps = ({
     }
   }, [rangePosition, open]);
   const openRangeStartSelection = event => {
-    event == null ? void 0 : event.stopPropagation();
+    event.stopPropagation();
     onRangePositionChange('start');
     if (!readOnly && !disableOpenPicker) {
       actions.onOpen();
     }
   };
   const openRangeEndSelection = event => {
-    event == null ? void 0 : event.stopPropagation();
+    event.stopPropagation();
     onRangePositionChange('end');
     if (!readOnly && !disableOpenPicker) {
       actions.onOpen();
@@ -51,31 +53,30 @@ export const useRangePickerInputProps = ({
       onRangePositionChange('end');
     }
   };
+  const readOnlyInput = readOnly != null ? readOnly : wrapperVariant === 'mobile';
   const startInputProps = _extends({
     inputRef: startRef,
-    label: localeText.start,
+    label: (_inLocaleText$start = inLocaleText == null ? void 0 : inLocaleText.start) != null ? _inLocaleText$start : localeText.start,
     onKeyDown: onSpaceOrEnter(openRangeStartSelection),
     onFocus: focusOnRangeStart,
     focused: open ? rangePosition === 'start' : undefined
   }, !readOnly && !disabled && {
     onClick: openRangeStartSelection
   }, {
-    inputProps: {
-      readOnly: wrapperVariant === 'mobile'
-    }
+    readOnly: readOnlyInput,
+    disabled
   });
   const endInputProps = _extends({
     inputRef: endRef,
-    label: localeText.end,
+    label: (_inLocaleText$end = inLocaleText == null ? void 0 : inLocaleText.end) != null ? _inLocaleText$end : localeText.end,
     onKeyDown: onSpaceOrEnter(openRangeEndSelection),
     onFocus: focusOnRangeEnd,
     focused: open ? rangePosition === 'end' : undefined
   }, !readOnly && !disabled && {
     onClick: openRangeEndSelection
   }, {
-    inputProps: {
-      readOnly: wrapperVariant === 'mobile'
-    }
+    readOnly: readOnlyInput,
+    disabled
   });
   const rootProps = {
     onBlur

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

@@ -5,6 +5,6 @@ import { UseStaticRangePickerParams, UseStaticRangePickerProps } from './useStat
  * Hook managing all the range static pickers:
  * - StaticDateRangePicker
  */
-export declare const useStaticRangePicker: <TDate, TView extends DateOrTimeView, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any>>({ props, valueManager, viewLookup, validator, ref, }: UseStaticRangePickerParams<TDate, TView, TExternalProps>) => {
+export declare const useStaticRangePicker: <TDate, TView extends DateOrTimeView, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any, TExternalProps>>({ props, valueManager, validator, ref, }: UseStaticRangePickerParams<TDate, TView, TExternalProps>) => {
     renderPicker: () => JSX.Element;
 };

package/internal/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -19,7 +19,6 @@ const PickerStaticViewLayout = styled(PickersViewLayout)(({
 export const useStaticRangePicker = ({
   props,
   valueManager,
-  viewLookup,
   validator,
   ref
 }) => {
@@ -27,7 +26,8 @@ export const useStaticRangePicker = ({
     localeText,
     components,
     componentsProps,
-    displayStaticWrapperAs
+    displayStaticWrapperAs,
+    autoFocus
   } = props;
   const [rangePosition, setRangePosition] = React.useState('start');
   const {
@@ -35,9 +35,9 @@ export const useStaticRangePicker = ({
     renderCurrentView
   } = usePicker({
     props,
-    viewLookup,
     valueManager,
     validator,
+    autoFocusView: autoFocus != null ? autoFocus : false,
     additionalViewProps: {},
     wrapperVariant: displayStaticWrapperAs
   });

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

@@ -8,7 +8,7 @@ export interface UseStaticRangePickerSlotsComponentsProps<TDate, TView extends D
 }
 export interface StaticRangeOnlyPickerProps extends StaticOnlyPickerProps {
 }
-export interface UseStaticRangePickerProps<TDate, TView extends DateOrTimeView, TError> extends BaseNextPickerProps<DateRange<TDate>, TDate, TView, TError>, StaticRangeOnlyPickerProps {
+export interface UseStaticRangePickerProps<TDate, TView extends DateOrTimeView, TError, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any, TExternalProps>> extends BaseNextPickerProps<DateRange<TDate>, TDate, TView, TError, TExternalProps, {}>, StaticRangeOnlyPickerProps {
     /**
      * Overrideable components.
      * @default {}
@@ -20,7 +20,7 @@ export interface UseStaticRangePickerProps<TDate, TView extends DateOrTimeView,
      */
     componentsProps?: UseStaticRangePickerSlotsComponentsProps<TDate, TView>;
 }
-export interface UseStaticRangePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, TExternalProps, {}>, 'valueManager' | 'viewLookup' | 'validator'> {
+export interface UseStaticRangePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, TExternalProps, {}>, 'valueManager' | 'validator'> {
     props: TExternalProps;
     /**
      * Ref to pass to the root element

package/internal/models/dateRange.d.ts

@@ -14,6 +14,16 @@ export interface DayRangeValidationProps<TDate> {
      */
     shouldDisableDate?: (day: TDate, position: 'start' | 'end') => boolean;
 }
-export interface UseDateRangeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, DateRangeValidationError>, 'format'>, DayRangeValidationProps<TDate>, BaseDateValidationProps<TDate> {
+/**
+ * Props used in every range picker.
+ */
+export interface BaseRangeProps {
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+}
+export interface UseDateRangeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, DateRangeValidationError>, 'format'>, DayRangeValidationProps<TDate>, BaseDateValidationProps<TDate>, BaseRangeProps {
 }
 export type UseDateRangeFieldDefaultizedProps<TDate> = DefaultizedProps<UseDateRangeFieldProps<TDate>, keyof BaseDateValidationProps<TDate> | 'format'>;

package/internal/models/dateTimeRange.d.ts

@@ -1,8 +1,8 @@
 import { BaseDateValidationProps, TimeValidationProps, DefaultizedProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
-import { DayRangeValidationProps } from './dateRange';
+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> {
+export interface UseDateTimeRangeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, 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

@@ -3,7 +3,12 @@ import { SlotComponentProps } from '@mui/base/utils';
 import TextField, { TextFieldProps } from '@mui/material/TextField';
 import Stack, { StackProps } from '@mui/material/Stack';
 import Typography, { TypographyProps } from '@mui/material/Typography';
-import { BaseFieldProps } from '@mui/x-date-pickers/internals';
+import { BaseFieldProps, FieldSection } from '@mui/x-date-pickers/internals';
+export interface RangeFieldSection extends FieldSection {
+    dateName: 'start' | 'end';
+}
+export interface RangeFieldSectionWithoutPosition extends Omit<RangeFieldSection, 'start' | 'end' | 'startInInput' | 'endInInput'> {
+}
 export interface BaseMultiInputFieldProps<TValue, TError> extends Omit<BaseFieldProps<TValue, TError>, 'components' | 'componentsProps'> {
     components?: {
         Root?: React.ElementType<StackProps>;

package/internal/models/range.d.ts

@@ -1,4 +1,3 @@
-import { FieldSection } from '@mui/x-date-pickers/internals';
 export type DateRange<TDate> = [TDate | null, TDate | null];
 export type NonEmptyDateRange<TDate> = [TDate, TDate];
 export type RangePosition = 'start' | 'end';
@@ -6,6 +5,3 @@ export interface RangePositionProps {
     rangePosition: RangePosition;
     onRangePositionChange: (newPosition: RangePosition) => void;
 }
-export interface DateRangeFieldSection extends FieldSection {
-    dateName: 'start' | 'end';
-}

package/internal/models/timeRange.d.ts

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

package/internal/utils/date-fields-utils.d.ts

@@ -1,6 +1,22 @@
-import { DateRangeFieldSection } from '../models/range';
-export declare const splitDateRangeSections: (sections: DateRangeFieldSection[]) => {
-    startDate: DateRangeFieldSection[];
-    endDate: DateRangeFieldSection[];
+import { RangeFieldSection } from '../models/fields';
+export declare const splitDateRangeSections: (sections: RangeFieldSection[]) => {
+    startDate: RangeFieldSection[];
+    endDate: RangeFieldSection[];
 };
-export declare const removeLastSeparator: (dateSections: DateRangeFieldSection[]) => DateRangeFieldSection[];
+export declare const removeLastSeparator: (dateSections: RangeFieldSection[]) => (RangeFieldSection | {
+    separator: null;
+    dateName: "start" | "end";
+    start: number;
+    end: number;
+    startInInput: number;
+    endInInput: number;
+    value: string;
+    placeholder: string;
+    startSeparator: string;
+    endSeparator: string;
+    dateSectionName: import("@mui/x-date-pickers").MuiDateSectionName;
+    contentType: "digit" | "letter";
+    formatValue: string;
+    edited: boolean;
+    hasTrailingZeroes: boolean;
+})[];

package/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY3MDQ1NDAwMDAwMA==";
+  const releaseInfo = "MTY3MTgzMjgwMDAwMA==";
   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

package/internal/utils/valueManagers.d.ts

@@ -1,8 +1,9 @@
 import { PickerStateValueManager, FieldValueManager } from '@mui/x-date-pickers/internals';
-import { DateRange, DateRangeFieldSection } from '../models/range';
+import { DateRange } from '../models/range';
 import type { DateRangeValidationError } from '../hooks/validation/useDateRangeValidation';
 import type { TimeRangeValidationError } from '../hooks/validation/useTimeRangeValidation';
 import type { DateTimeRangeValidationError } from '../hooks/validation/useDateTimeRangeValidation';
+import { RangeFieldSection } from '../models/fields';
 export type RangePickerStateValueManager<TValue = [any, any], TDate = any, TError extends DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError = any> = PickerStateValueManager<TValue, TDate, TError>;
 export declare const rangeValueManager: RangePickerStateValueManager;
-export declare const rangeFieldValueManager: FieldValueManager<DateRange<any>, any, DateRangeFieldSection, DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError>;
+export declare const rangeFieldValueManager: FieldValueManager<DateRange<any>, any, RangeFieldSection, DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError>;

package/internal/utils/valueManagers.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { replaceInvalidDateByNull, splitFormatIntoSections, addPositionPropertiesToSections, createDateStrFromSections } from '@mui/x-date-pickers/internals';
+import { replaceInvalidDateByNull, splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections, getSectionOrder } from '@mui/x-date-pickers/internals';
 import { splitDateRangeSections, removeLastSeparator } from './date-fields-utils';
 export const rangeValueManager = {
   emptyValue: [null, null],
@@ -29,36 +29,29 @@ export const rangeFieldValueManager = {
       startDate: null,
       endDate: null
     } : splitDateRangeSections(prevSections);
-    const getSections = (newDate, prevDateSections) => {
+    const getSections = (newDate, prevDateSections, position) => {
       const shouldReUsePrevDateSections = !utils.isValid(newDate) && !!prevDateSections;
       if (shouldReUsePrevDateSections) {
         return prevDateSections;
       }
-      return splitFormatIntoSections(utils, localeText, format, newDate);
-    };
-    const rawSectionsOfStartDate = getSections(start, prevDateRangeSections.startDate);
-    const rawSectionsOfEndDate = getSections(end, prevDateRangeSections.endDate);
-    const sectionsOfStartDate = rawSectionsOfStartDate.map((section, sectionIndex) => {
-      if (sectionIndex === rawSectionsOfStartDate.length - 1) {
+      const sections = splitFormatIntoSections(utils, localeText, format, newDate);
+      return sections.map((section, sectionIndex) => {
+        if (sectionIndex === sections.length - 1 && position === 'start') {
+          return _extends({}, section, {
+            dateName: position,
+            endSeparator: `${section.endSeparator}\u2069 – \u2066`
+          });
+        }
         return _extends({}, section, {
-          dateName: 'start',
-          separator: ' – '
+          dateName: position
         });
-      }
-      return _extends({}, section, {
-        dateName: 'start'
       });
-    });
-    const sectionsOfEndDate = rawSectionsOfEndDate.map(section => _extends({}, section, {
-      dateName: 'end'
-    }));
-    return addPositionPropertiesToSections([...sectionsOfStartDate, ...sectionsOfEndDate]);
+    };
+    return addPositionPropertiesToSections([...getSections(start, prevDateRangeSections.startDate, 'start'), ...getSections(end, prevDateRangeSections.endDate, 'end')]);
   },
   getValueStrFromSections: sections => {
     const dateRangeSections = splitDateRangeSections(sections);
-    const startDateStr = createDateStrFromSections(dateRangeSections.startDate, true);
-    const endDateStr = createDateStrFromSections(dateRangeSections.endDate, true);
-    return `${startDateStr}${endDateStr}`;
+    return createDateStrForInputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate]);
   },
   getActiveDateSections: (sections, activeSection) => {
     const index = activeSection.dateName === 'start' ? 0 : 1;
@@ -87,5 +80,11 @@ export const rangeFieldValueManager = {
       })
     };
   },
-  hasError: error => error[0] != null || error[1] != null
+  hasError: error => error[0] != null || error[1] != null,
+  getSectionOrder: (utils, localeText, format, isRTL) => {
+    const splitedFormat = splitFormatIntoSections(utils, localeText, format, null);
+    return getSectionOrder([...splitedFormat.slice(0, splitedFormat.length - 1), _extends({}, splitedFormat[splitedFormat.length - 1], {
+      endSeparator: ' – '
+    }), ...splitedFormat], isRTL);
+  }
 };