@mui/x-date-pickers-pro 6.0.1 → 6.0.3

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

@@ -5,7 +5,7 @@ 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, PickersPopperSlotsComponent, PickersPopperSlotsComponentsProps, ExportedBaseToolbarProps, UsePickerViewsProps, UncapitalizeObjectKeys, BaseNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps } from '@mui/x-date-pickers/internals';
-import { DateRange } from '../../models';
+import { DateRange, RangeFieldSection } from '../../models';
 import { BaseMultiInputFieldProps } from '../../models/fields';
 import { UseRangePositionProps, UseRangePositionResponse } from '../useRangePosition';
 export interface UseDesktopRangePickerSlotsComponent<TDate, TView extends DateOrTimeView> extends Pick<PickersPopperSlotsComponent, 'DesktopPaper' | 'DesktopTransition' | 'DesktopTrapFocus' | 'Popper'>, ExportedPickersLayoutSlotsComponent<DateRange<TDate>, TDate, TView> {
@@ -21,13 +21,15 @@ export interface UseDesktopRangePickerSlotsComponent<TDate, TView extends DateOr
     TextField?: React.ElementType<TextFieldProps>;
 }
 export interface UseDesktopRangePickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends PickersPopperSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<DateRange<TDate>, TDate, TView> {
-    field?: SlotComponentProps<React.ElementType<BaseMultiInputFieldProps<DateRange<TDate>, unknown>>, {}, unknown>;
+    field?: SlotComponentProps<React.ElementType<BaseMultiInputFieldProps<DateRange<TDate>, RangeFieldSection, unknown>>, {}, unknown>;
     fieldRoot?: SlotComponentProps<typeof Stack, {}, unknown>;
     fieldSeparator?: SlotComponentProps<typeof Typography, {}, unknown>;
-    textField?: SlotComponentProps<typeof TextField, {}, unknown>;
+    textField?: SlotComponentProps<typeof TextField, {}, {
+        position?: 'start' | 'end';
+    } & Record<string, any>>;
     toolbar?: ExportedBaseToolbarProps;
 }
-export interface DesktopRangeOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null>, UsePickerViewsNonStaticProps, UseRangePositionProps {
+export interface DesktopRangeOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null, RangeFieldSection>, UsePickerViewsNonStaticProps, UseRangePositionProps {
     /**
      * If `true`, the start `input` element is focused during the first mount.
      */
@@ -47,6 +49,6 @@ export interface UseDesktopRangePickerProps<TDate, TView extends DateOrTimeView,
 }
 export interface DesktopRangePickerAdditionalViewProps extends UseRangePositionResponse {
 }
-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'> {
+export interface UseDesktopRangePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseDesktopRangePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, RangeFieldSection, TExternalProps, DesktopRangePickerAdditionalViewProps>, 'valueManager' | 'validator'> {
     props: TExternalProps;
 }

package/internal/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -86,7 +86,7 @@ export const useMobileRangePicker = ({
       const externalInputProps = resolveComponentProps(innerSlotProps == null ? void 0 : innerSlotProps.textField, ownerState);
       return _extends({}, isToolbarHidden && {
         id: `${labelId}-${ownerState.position}`
-      }, externalInputProps, ownerState.position === 'start' ? fieldSlotProps.startInput : fieldSlotProps.endInput);
+      }, ownerState.position === 'start' ? fieldSlotProps.startInput : fieldSlotProps.endInput, externalInputProps);
     },
     root: ownerState => {
       const externalRootProps = resolveComponentProps(innerSlotProps == null ? void 0 : innerSlotProps.fieldRoot, ownerState);

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

@@ -5,7 +5,7 @@ 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 { DateRange, RangeFieldSection } from '../../models';
 import { BaseMultiInputFieldProps } from '../../models/fields';
 import { UseRangePositionProps, UseRangePositionResponse } from '../useRangePosition';
 export interface UseMobileRangePickerSlotsComponent<TDate, TView extends DateOrTimeView> extends PickersModalDialogSlotsComponent, ExportedPickersLayoutSlotsComponent<DateRange<TDate>, TDate, TView> {
@@ -20,13 +20,15 @@ export interface UseMobileRangePickerSlotsComponent<TDate, TView extends DateOrT
     TextField?: React.ElementType<TextFieldProps>;
 }
 export interface UseMobileRangePickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends PickersModalDialogSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<DateRange<TDate>, TDate, TView> {
-    field?: SlotComponentProps<React.ElementType<BaseMultiInputFieldProps<DateRange<TDate>, unknown>>, {}, unknown>;
+    field?: SlotComponentProps<React.ElementType<BaseMultiInputFieldProps<DateRange<TDate>, RangeFieldSection, unknown>>, {}, unknown>;
     fieldRoot?: SlotComponentProps<typeof Stack, {}, unknown>;
     fieldSeparator?: SlotComponentProps<typeof Typography, {}, unknown>;
-    textField?: SlotComponentProps<typeof TextField, {}, unknown>;
+    textField?: SlotComponentProps<typeof TextField, {}, {
+        position?: 'start' | 'end';
+    } & Record<string, any>>;
     toolbar?: ExportedBaseToolbarProps;
 }
-export interface MobileRangeOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null>, UsePickerViewsNonStaticProps, UseRangePositionProps {
+export interface MobileRangeOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null, RangeFieldSection>, UsePickerViewsNonStaticProps, 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,6 +44,6 @@ export interface UseMobileRangePickerProps<TDate, TView extends DateOrTimeView,
 }
 export interface MobileRangePickerAdditionalViewProps extends UseRangePositionResponse {
 }
-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, TTextFieldProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, startInputRef, unstableStartFieldRef, endTextFieldProps, endInputRef, unstableEndFieldRef, }: UseMultiInputDateRangeFieldParams<TDate, TTextFieldProps>) => UseMultiInputRangeFieldResponse<TTextFieldProps>;

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, TTextFieldProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, startInputRef, unstableStartFieldRef, endTextFieldProps, endInputRef, unstableEndFieldRef, }: UseMultiInputDateTimeRangeFieldParams<TDate, TTextFieldProps>) => UseMultiInputRangeFieldResponse<TTextFieldProps>;

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 {}, TTextFieldProps extends {}> {
+    sharedProps: TSharedProps;
+    startTextFieldProps: TTextFieldProps;
+    startInputRef?: React.Ref<HTMLInputElement>;
+    unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
+    endTextFieldProps: TTextFieldProps;
+    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, TTextFieldProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, startInputRef, unstableStartFieldRef, endTextFieldProps, endInputRef, unstableEndFieldRef, }: UseMultiInputTimeRangeFieldParams<TDate, TTextFieldProps>) => UseMultiInputRangeFieldResponse<TTextFieldProps>;

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/useRangePickerInputProps.d.ts

@@ -1,7 +1,7 @@
 import { PickersInputLocaleText } from '@mui/x-date-pickers';
 import { DateOrTimeView, UsePickerResponse, WrapperVariant } from '@mui/x-date-pickers/internals';
-import { DateRange, MultiInputFieldSlotRootProps, MultiInputFieldSlotTextFieldProps, RangePosition } from '../models';
-interface UseRangePickerFieldParams<TDate, TView extends DateOrTimeView> extends Pick<UsePickerResponse<DateRange<TDate>, TView, any>, 'open' | 'actions'> {
+import { DateRange, MultiInputFieldSlotRootProps, MultiInputFieldSlotTextFieldProps, RangeFieldSection, RangePosition } from '../models';
+interface UseRangePickerFieldParams<TDate, TView extends DateOrTimeView> extends Pick<UsePickerResponse<DateRange<TDate>, TView, RangeFieldSection, any>, 'open' | 'actions'> {
     wrapperVariant: WrapperVariant;
     readOnly?: boolean;
     disabled?: boolean;

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

@@ -3,6 +3,7 @@ import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponen
 import { DateOrTimeView, BasePickerProps, UsePickerParams, ExportedBaseToolbarProps, StaticOnlyPickerProps, UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 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 +23,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/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

@@ -27,7 +27,7 @@ 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> {
+export interface BaseMultiInputFieldProps<TValue, TSection extends FieldSection, TError> extends BaseFieldProps<TValue, TSection, TError> {
     slots?: {};
     slotProps?: {
         root?: SlotComponentProps<React.ElementType<MultiInputFieldSlotRootProps>, {}, Record<string, any>>;

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 = "MTY3ODMwMjAwMDAwMA==";
+  const releaseInfo = "MTY3OTUyNjAwMDAwMA==";
   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.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { replaceInvalidDateByNull, splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections, getSectionOrder } from '@mui/x-date-pickers/internals';
+import { replaceInvalidDateByNull, splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections, areDatesEqual } from '@mui/x-date-pickers/internals';
 import { splitDateRangeSections, removeLastSeparator } from './date-fields-utils';
 export const rangeValueManager = {
   emptyValue: [null, null],
   getTodayValue: utils => [utils.date(), utils.date()],
   cleanValue: (utils, value) => value.map(date => replaceInvalidDateByNull(utils, date)),
-  areValuesEqual: (utils, a, b) => utils.isEqual(a[0], b[0]) && utils.isEqual(a[1], b[1]),
+  areValuesEqual: (utils, a, b) => areDatesEqual(utils, a[0], b[0]) && areDatesEqual(utils, a[1], b[1]),
   isSameError: (a, b) => b !== null && a[1] === b[1] && a[0] === b[0],
   defaultErrorState: [null, null]
 };
@@ -80,11 +80,5 @@ export const rangeFieldValueManager = {
       })
     };
   },
-  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);
-  }
+  hasError: error => error[0] != null || error[1] != null
 };

package/legacy/DateRangePickerDay/DateRangePickerDay.js

@@ -61,7 +61,7 @@ var DateRangePickerDayRoot = styled('div', {
   })), _extends2), ownerState.isHighlighting && {
     borderRadius: 0,
     color: (theme.vars || theme).palette.primary.contrastText,
-    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.lightChannel, " / 0.6)") : alpha(theme.palette.primary.light, 0.6),
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.focusOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
     '&:first-of-type': startBorderStyle,
     '&:last-of-type': endBorderStyle
   }, (ownerState.isStartOfHighlighting || ownerState.isFirstVisibleCell) && _extends({}, startBorderStyle, {
@@ -114,20 +114,17 @@ var DateRangePickerDayDay = styled(PickersDay, {
     return [_defineProperty({}, "&.".concat(dateRangePickerDayClasses.dayInsideRangeInterval), styles.dayInsideRangeInterval), _defineProperty({}, "&.".concat(dateRangePickerDayClasses.dayOutsideRangeInterval), styles.dayOutsideRangeInterval), _defineProperty({}, "&.".concat(dateRangePickerDayClasses.notSelectedDate), styles.notSelectedDate), styles.day];
   }
 })(function (_ref18) {
-  var theme = _ref18.theme,
-    ownerState = _ref18.ownerState;
+  var ownerState = _ref18.ownerState;
   return _extends({
     // Required to overlap preview border
     transform: 'scale(1.1)',
     '& > *': {
       transform: 'scale(0.9)'
     }
-  }, !ownerState.selected && {
-    backgroundColor: 'transparent'
   }, !ownerState.selected && ownerState.isHighlighting && _defineProperty({
-    color: theme.palette.getContrastText(alpha(theme.palette.primary.light, 0.6))
+    opacity: 0.7
   }, "&.".concat(pickersDayClasses.dayOutsideMonth), {
-    color: alpha(theme.palette.getContrastText(theme.palette.primary.light), 0.4)
+    opacity: 0.4
   }), ownerState.draggable && {
     cursor: 'grab'
   }, ownerState.draggable && {

package/legacy/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -287,6 +287,8 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  unstableEndFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  unstableStartFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/legacy/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"],
+var _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableStartFieldRef", "unstableEndFieldRef", "autoFocus"],
   _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
   _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 import * as React from 'react';
@@ -71,6 +71,9 @@ var MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiI
     disablePast = themeProps.disablePast,
     selectedSections = themeProps.selectedSections,
     onSelectedSectionsChange = themeProps.onSelectedSectionsChange,
+    unstableStartFieldRef = themeProps.unstableStartFieldRef,
+    unstableEndFieldRef = themeProps.unstableEndFieldRef,
+    autoFocus = themeProps.autoFocus,
     other = _objectWithoutProperties(themeProps, _excluded);
   var slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
   var slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
@@ -89,6 +92,9 @@ var MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiI
   var startTextFieldProps = useSlotProps({
     elementType: TextField,
     externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    additionalProps: {
+      autoFocus: autoFocus
+    },
     ownerState: _extends({}, ownerState, {
       position: 'start'
     })
@@ -133,7 +139,9 @@ var MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiI
       startTextFieldProps: startTextFieldProps,
       endTextFieldProps: endTextFieldProps,
       startInputRef: startTextFieldProps.inputRef,
-      endInputRef: endTextFieldProps.inputRef
+      unstableStartFieldRef: unstableStartFieldRef,
+      endInputRef: endTextFieldProps.inputRef,
+      unstableEndFieldRef: unstableEndFieldRef
     }),
     _useMultiInputDateTim2 = _useMultiInputDateTim.startDate,
     onStartInputKeyDown = _useMultiInputDateTim2.onKeyDown,
@@ -179,6 +187,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * @default `utils.is12HourCycleInCurrentLocale()`
    */
   ampm: PropTypes.bool,
+  autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
    * Overridable components.
@@ -344,6 +353,8 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  unstableEndFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  unstableStartFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/legacy/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"],
+var _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableStartFieldRef", "unstableEndFieldRef", "autoFocus"],
   _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
   _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 import * as React from 'react';
@@ -66,6 +66,9 @@ var MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
     disablePast = themeProps.disablePast,
     selectedSections = themeProps.selectedSections,
     onSelectedSectionsChange = themeProps.onSelectedSectionsChange,
+    unstableStartFieldRef = themeProps.unstableStartFieldRef,
+    unstableEndFieldRef = themeProps.unstableEndFieldRef,
+    autoFocus = themeProps.autoFocus,
     other = _objectWithoutProperties(themeProps, _excluded);
   var slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
   var slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
@@ -84,6 +87,9 @@ var MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
   var startTextFieldProps = useSlotProps({
     elementType: TextField,
     externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    additionalProps: {
+      autoFocus: autoFocus
+    },
     ownerState: _extends({}, ownerState, {
       position: 'start'
     })
@@ -123,7 +129,9 @@ var MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
       startTextFieldProps: startTextFieldProps,
       endTextFieldProps: endTextFieldProps,
       startInputRef: startTextFieldProps.inputRef,
-      endInputRef: endTextFieldProps.inputRef
+      unstableStartFieldRef: unstableStartFieldRef,
+      endInputRef: endTextFieldProps.inputRef,
+      unstableEndFieldRef: unstableEndFieldRef
     }),
     _useMultiInputTimeRan2 = _useMultiInputTimeRan.startDate,
     onStartInputKeyDown = _useMultiInputTimeRan2.onKeyDown,
@@ -169,6 +177,7 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * @default `utils.is12HourCycleInCurrentLocale()`
    */
   ampm: PropTypes.bool,
+  autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
    * Overridable components.
@@ -310,6 +319,8 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  unstableEndFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  unstableStartFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.