@mui/x-date-pickers-pro 7.0.0-beta.1 → 7.0.0-beta.4

package/internals/hooks/useMultiInputFieldSelectedSections.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
+import useEventCallback from '@mui/utils/useEventCallback';
+export const useMultiInputFieldSelectedSections = params => {
+  var _params$selectedSecti;
+  const unstableEndFieldRef = React.useRef(null);
+  const handleUnstableEndFieldRef = useForkRef(params.unstableEndFieldRef, unstableEndFieldRef);
+  const [startSelectedSection, setStartSelectedSection] = React.useState((_params$selectedSecti = params.selectedSections) != null ? _params$selectedSecti : null);
+  const [endSelectedSection, setEndSelectedSection] = React.useState(null);
+  const getActiveField = () => {
+    if (unstableEndFieldRef.current && unstableEndFieldRef.current.isFieldFocused()) {
+      return 'end';
+    }
+    return 'start';
+  };
+  const handleStartSelectedSectionChange = useEventCallback(newSelectedSections => {
+    setStartSelectedSection(newSelectedSections);
+    if (getActiveField() === 'start') {
+      var _params$onSelectedSec;
+      (_params$onSelectedSec = params.onSelectedSectionsChange) == null || _params$onSelectedSec.call(params, newSelectedSections);
+    }
+  });
+  const handleEndSelectedSectionChange = useEventCallback(newSelectedSections => {
+    setEndSelectedSection(newSelectedSections);
+    if (getActiveField() === 'end') {
+      var _params$onSelectedSec2;
+      (_params$onSelectedSec2 = params.onSelectedSectionsChange) == null || _params$onSelectedSec2.call(params, newSelectedSections);
+    }
+  });
+  const activeField = getActiveField();
+  return {
+    start: {
+      unstableFieldRef: params.unstableStartFieldRef,
+      selectedSections: activeField === 'start' && params.selectedSections !== undefined ? params.selectedSections : startSelectedSection,
+      onSelectedSectionsChange: handleStartSelectedSectionChange
+    },
+    end: {
+      unstableFieldRef: handleUnstableEndFieldRef,
+      selectedSections: activeField === 'end' && params.selectedSections !== undefined ? params.selectedSections : endSelectedSection,
+      onSelectedSectionsChange: handleEndSelectedSectionChange
+    }
+  };
+};

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

@@ -1,3 +1,4 @@
+import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { UseMultiInputDateRangeFieldParams } from '../../../MultiInputDateRangeField/MultiInputDateRangeField.types';
 import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types';
-export declare const useMultiInputDateRangeField: <TDate, TTextFieldSlotProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, unstableStartFieldRef, endTextFieldProps, unstableEndFieldRef, }: UseMultiInputDateRangeFieldParams<TDate, TTextFieldSlotProps>) => UseMultiInputRangeFieldResponse<TTextFieldSlotProps>;
+export declare const useMultiInputDateRangeField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, unstableStartFieldRef, endTextFieldProps, unstableEndFieldRef, }: UseMultiInputDateRangeFieldParams<TDate, TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps>) => UseMultiInputRangeFieldResponse<TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps>;

package/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import useEventCallback from '@mui/utils/useEventCallback';
 import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
-import { useLocalizationContext, useValidation, useControlledValueWithTimezone } from '@mui/x-date-pickers/internals';
-import { useDefaultizedDateRangeFieldProps } from '../../../SingleInputDateRangeField/useSingleInputDateRangeField';
+import { useLocalizationContext, useValidation, useControlledValueWithTimezone, useDefaultizedDateField } from '@mui/x-date-pickers/internals';
 import { validateDateRange } from '../../utils/validation/validateDateRange';
 import { rangeValueManager } from '../../utils/valueManagers';
 import { excludeProps } from './shared';
+import { useMultiInputFieldSelectedSections } from '../useMultiInputFieldSelectedSections';
 export const useMultiInputDateRangeField = ({
   sharedProps: inSharedProps,
   startTextFieldProps,
@@ -13,7 +13,7 @@ export const useMultiInputDateRangeField = ({
   endTextFieldProps,
   unstableEndFieldRef
 }) => {
-  const sharedProps = useDefaultizedDateRangeFieldProps(inSharedProps);
+  const sharedProps = useDefaultizedDateField(inSharedProps);
   const adapter = useLocalizationContext();
   const {
     value: valueProp,
@@ -26,7 +26,9 @@ export const useMultiInputDateRangeField = ({
     readOnly,
     selectedSections,
     onSelectedSectionsChange,
-    timezone: timezoneProp
+    timezone: timezoneProp,
+    enableAccessibleFieldDOMStructure,
+    autoFocus
   } = sharedProps;
   const {
     value,
@@ -63,37 +65,40 @@ export const useMultiInputDateRangeField = ({
     value,
     timezone
   }), validateDateRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
+  const selectedSectionsResponse = useMultiInputFieldSelectedSections({
+    selectedSections,
+    onSelectedSectionsChange,
+    unstableStartFieldRef,
+    unstableEndFieldRef
+  });
   const startFieldProps = _extends({
     error: !!validationError[0]
-  }, startTextFieldProps, {
+  }, startTextFieldProps, selectedSectionsResponse.start, {
     disabled,
     readOnly,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
     timezone,
-    unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange,
-    selectedSections,
-    onSelectedSectionsChange
+    enableAccessibleFieldDOMStructure,
+    autoFocus // Do not add on end field.
   });
   const endFieldProps = _extends({
     error: !!validationError[1]
-  }, endTextFieldProps, {
+  }, endTextFieldProps, selectedSectionsResponse.end, {
     format,
     formatDensity,
     shouldRespectLeadingZeros,
     disabled,
     readOnly,
     timezone,
-    unstableFieldRef: unstableEndFieldRef,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange,
-    selectedSections,
-    onSelectedSectionsChange
+    enableAccessibleFieldDOMStructure
   });
   const startDateResponse = useDateField(startFieldProps);
   const endDateResponse = useDateField(endFieldProps);

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

@@ -1,4 +1,4 @@
-import type { UseMultiInputDateTimeRangeFieldDefaultizedProps, UseMultiInputDateTimeRangeFieldParams, UseMultiInputDateTimeRangeFieldProps } from '../../../MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types';
+import { PickerValidDate } from '@mui/x-date-pickers/models';
+import type { UseMultiInputDateTimeRangeFieldParams } 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, TTextFieldSlotProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, unstableStartFieldRef, endTextFieldProps, unstableEndFieldRef, }: UseMultiInputDateTimeRangeFieldParams<TDate, TTextFieldSlotProps>) => UseMultiInputRangeFieldResponse<TTextFieldSlotProps>;
+export declare const useMultiInputDateTimeRangeField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, unstableStartFieldRef, endTextFieldProps, unstableEndFieldRef, }: UseMultiInputDateTimeRangeFieldParams<TDate, TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps>) => UseMultiInputRangeFieldResponse<TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps>;

package/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js

@@ -1,27 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import useEventCallback from '@mui/utils/useEventCallback';
 import { unstable_useDateTimeField as useDateTimeField } from '@mui/x-date-pickers/DateTimeField';
-import { applyDefaultDate, useDefaultDates, useLocalizationContext, useUtils, useValidation, useControlledValueWithTimezone } from '@mui/x-date-pickers/internals';
+import { useLocalizationContext, useValidation, useControlledValueWithTimezone, useDefaultizedDateTimeField } from '@mui/x-date-pickers/internals';
 import { validateDateTimeRange } from '../../utils/validation/validateDateTimeRange';
 import { rangeValueManager } from '../../utils/valueManagers';
 import { excludeProps } from './shared';
-export const useDefaultizedDateTimeRangeFieldProps = props => {
-  var _props$ampm, _props$disablePast, _props$disableFuture, _props$format, _props$minDateTime, _props$maxDateTime, _props$minDateTime2, _props$maxDateTime2;
-  const utils = useUtils();
-  const defaultDates = useDefaultDates();
-  const ampm = (_props$ampm = props.ampm) != null ? _props$ampm : utils.is12HourCycleInCurrentLocale();
-  const defaultFormat = ampm ? utils.formats.keyboardDateTime12h : utils.formats.keyboardDateTime24h;
-  return _extends({}, props, {
-    disablePast: (_props$disablePast = props.disablePast) != null ? _props$disablePast : false,
-    disableFuture: (_props$disableFuture = props.disableFuture) != null ? _props$disableFuture : false,
-    format: (_props$format = props.format) != null ? _props$format : defaultFormat,
-    minDate: applyDefaultDate(utils, (_props$minDateTime = props.minDateTime) != null ? _props$minDateTime : props.minDate, defaultDates.minDate),
-    maxDate: applyDefaultDate(utils, (_props$maxDateTime = props.maxDateTime) != null ? _props$maxDateTime : props.maxDate, defaultDates.maxDate),
-    minTime: (_props$minDateTime2 = props.minDateTime) != null ? _props$minDateTime2 : props.minTime,
-    maxTime: (_props$maxDateTime2 = props.maxDateTime) != null ? _props$maxDateTime2 : props.maxTime,
-    disableIgnoringDatePartForTimeValidation: Boolean(props.minDateTime || props.maxDateTime)
-  });
-};
+import { useMultiInputFieldSelectedSections } from '../useMultiInputFieldSelectedSections';
 export const useMultiInputDateTimeRangeField = ({
   sharedProps: inSharedProps,
   startTextFieldProps,
@@ -29,19 +13,22 @@ export const useMultiInputDateTimeRangeField = ({
   endTextFieldProps,
   unstableEndFieldRef
 }) => {
-  const sharedProps = useDefaultizedDateTimeRangeFieldProps(inSharedProps);
+  const sharedProps = useDefaultizedDateTimeField(inSharedProps);
   const adapter = useLocalizationContext();
   const {
     value: valueProp,
     defaultValue,
     format,
+    formatDensity,
     shouldRespectLeadingZeros,
-    timezone: timezoneProp,
     onChange,
     disabled,
     readOnly,
     selectedSections,
-    onSelectedSectionsChange
+    onSelectedSectionsChange,
+    timezone: timezoneProp,
+    enableAccessibleFieldDOMStructure,
+    autoFocus
   } = sharedProps;
   const {
     value,
@@ -78,35 +65,40 @@ export const useMultiInputDateTimeRangeField = ({
     value,
     timezone
   }), validateDateTimeRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
+  const selectedSectionsResponse = useMultiInputFieldSelectedSections({
+    selectedSections,
+    onSelectedSectionsChange,
+    unstableStartFieldRef,
+    unstableEndFieldRef
+  });
   const startFieldProps = _extends({
     error: !!validationError[0]
-  }, startTextFieldProps, {
-    format,
-    shouldRespectLeadingZeros,
+  }, startTextFieldProps, selectedSectionsResponse.start, {
     disabled,
     readOnly,
+    format,
+    formatDensity,
+    shouldRespectLeadingZeros,
     timezone,
-    unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange,
-    selectedSections,
-    onSelectedSectionsChange
+    enableAccessibleFieldDOMStructure,
+    autoFocus // Do not add on end field.
   });
   const endFieldProps = _extends({
     error: !!validationError[1]
-  }, endTextFieldProps, {
+  }, endTextFieldProps, selectedSectionsResponse.end, {
     format,
+    formatDensity,
     shouldRespectLeadingZeros,
     disabled,
     readOnly,
     timezone,
-    unstableFieldRef: unstableEndFieldRef,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange,
-    selectedSections,
-    onSelectedSectionsChange
+    enableAccessibleFieldDOMStructure
   });
   const startDateResponse = useDateTimeField(startFieldProps);
   const endDateResponse = useDateTimeField(endFieldProps);

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

@@ -1,11 +1,11 @@
 import { UseFieldResponse } from '@mui/x-date-pickers/internals';
-import { MultiInputFieldRefs } from '../../models/fields';
+import { MultiInputFieldRefs } from '../../../models';
 export interface UseMultiInputRangeFieldParams<TSharedProps extends {}, TTextFieldSlotProps extends {}> extends MultiInputFieldRefs {
     sharedProps: TSharedProps;
     startTextFieldProps: TTextFieldSlotProps;
     endTextFieldProps: TTextFieldSlotProps;
 }
-export interface UseMultiInputRangeFieldResponse<TForwardedProps extends {}> {
-    startDate: UseFieldResponse<TForwardedProps>;
-    endDate: UseFieldResponse<TForwardedProps>;
+export interface UseMultiInputRangeFieldResponse<TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends {}> {
+    startDate: UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps>;
+    endDate: UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps>;
 }

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

@@ -1,4 +1,4 @@
-import type { UseMultiInputTimeRangeFieldDefaultizedProps, UseMultiInputTimeRangeFieldParams, UseMultiInputTimeRangeFieldProps } from '../../../MultiInputTimeRangeField/MultiInputTimeRangeField.types';
+import { PickerValidDate } from '@mui/x-date-pickers/models';
+import type { UseMultiInputTimeRangeFieldParams } 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, TTextFieldSlotProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, unstableStartFieldRef, endTextFieldProps, unstableEndFieldRef, }: UseMultiInputTimeRangeFieldParams<TDate, TTextFieldSlotProps>) => UseMultiInputRangeFieldResponse<TTextFieldSlotProps>;
+export declare const useMultiInputTimeRangeField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, unstableStartFieldRef, endTextFieldProps, unstableEndFieldRef, }: UseMultiInputTimeRangeFieldParams<TDate, TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps>) => UseMultiInputRangeFieldResponse<TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps>;

package/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js

@@ -1,21 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import useEventCallback from '@mui/utils/useEventCallback';
 import { unstable_useTimeField as useTimeField } from '@mui/x-date-pickers/TimeField';
-import { useLocalizationContext, useUtils, useValidation, useControlledValueWithTimezone } from '@mui/x-date-pickers/internals';
+import { useLocalizationContext, useValidation, useControlledValueWithTimezone, useDefaultizedTimeField } from '@mui/x-date-pickers/internals';
 import { validateTimeRange } from '../../utils/validation/validateTimeRange';
 import { rangeValueManager } from '../../utils/valueManagers';
 import { excludeProps } from './shared';
-export const useDefaultizedTimeRangeFieldProps = props => {
-  var _props$ampm, _props$disablePast, _props$disableFuture, _props$format;
-  const utils = useUtils();
-  const ampm = (_props$ampm = props.ampm) != null ? _props$ampm : utils.is12HourCycleInCurrentLocale();
-  const defaultFormat = ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h;
-  return _extends({}, props, {
-    disablePast: (_props$disablePast = props.disablePast) != null ? _props$disablePast : false,
-    disableFuture: (_props$disableFuture = props.disableFuture) != null ? _props$disableFuture : false,
-    format: (_props$format = props.format) != null ? _props$format : defaultFormat
-  });
-};
+import { useMultiInputFieldSelectedSections } from '../useMultiInputFieldSelectedSections';
 export const useMultiInputTimeRangeField = ({
   sharedProps: inSharedProps,
   startTextFieldProps,
@@ -23,19 +13,22 @@ export const useMultiInputTimeRangeField = ({
   endTextFieldProps,
   unstableEndFieldRef
 }) => {
-  const sharedProps = useDefaultizedTimeRangeFieldProps(inSharedProps);
+  const sharedProps = useDefaultizedTimeField(inSharedProps);
   const adapter = useLocalizationContext();
   const {
     value: valueProp,
     defaultValue,
     format,
+    formatDensity,
     shouldRespectLeadingZeros,
-    timezone: timezoneProp,
     onChange,
     disabled,
     readOnly,
     selectedSections,
-    onSelectedSectionsChange
+    onSelectedSectionsChange,
+    timezone: timezoneProp,
+    enableAccessibleFieldDOMStructure,
+    autoFocus
   } = sharedProps;
   const {
     value,
@@ -72,35 +65,40 @@ export const useMultiInputTimeRangeField = ({
     value,
     timezone
   }), validateTimeRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
+  const selectedSectionsResponse = useMultiInputFieldSelectedSections({
+    selectedSections,
+    onSelectedSectionsChange,
+    unstableStartFieldRef,
+    unstableEndFieldRef
+  });
   const startFieldProps = _extends({
     error: !!validationError[0]
-  }, startTextFieldProps, {
-    format,
-    shouldRespectLeadingZeros,
+  }, startTextFieldProps, selectedSectionsResponse.start, {
     disabled,
     readOnly,
+    format,
+    formatDensity,
+    shouldRespectLeadingZeros,
     timezone,
-    unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange,
-    selectedSections,
-    onSelectedSectionsChange
+    enableAccessibleFieldDOMStructure,
+    autoFocus // Do not add on end field.
   });
   const endFieldProps = _extends({
     error: !!validationError[1]
-  }, endTextFieldProps, {
+  }, endTextFieldProps, selectedSectionsResponse.end, {
     format,
+    formatDensity,
     shouldRespectLeadingZeros,
     disabled,
     readOnly,
     timezone,
-    unstableFieldRef: unstableEndFieldRef,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange,
-    selectedSections,
-    onSelectedSectionsChange
+    enableAccessibleFieldDOMStructure
   });
   const startDateResponse = useTimeField(startFieldProps);
   const endDateResponse = useTimeField(endFieldProps);

package/internals/hooks/useRangePosition.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { FieldRef } from '@mui/x-date-pickers/models';
-import { RangePosition } from '../../models';
-import { RangeFieldSection } from '../models/fields';
+import { RangePosition, RangeFieldSection } from '../../models';
 export interface UseRangePositionProps {
     /**
      * The position in the currently edited date range.
@@ -23,6 +22,5 @@ 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;
+export declare const useRangePosition: (props: UseRangePositionProps, singleInputFieldRef?: React.RefObject<FieldRef<RangeFieldSection>>) => UseRangePositionResponse;

package/internals/hooks/useRangePosition.js

@@ -1,9 +1,7 @@
-import * as React from 'react';
 import useControlled from '@mui/utils/useControlled';
 import useEventCallback from '@mui/utils/useEventCallback';
-export const useRangePosition = props => {
+export const useRangePosition = (props, singleInputFieldRef) => {
   var _props$defaultRangePo;
-  const singleInputFieldRef = React.useRef();
   const [rangePosition, setRangePosition] = useControlled({
     name: 'useRangePosition',
     state: 'rangePosition',
@@ -14,7 +12,7 @@ export const useRangePosition = props => {
   // 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) {
+    if ((singleInputFieldRef == null ? void 0 : singleInputFieldRef.current) == null) {
       return;
     }
     const sections = singleInputFieldRef.current.getSections();
@@ -29,7 +27,6 @@ export const useRangePosition = props => {
   });
   return {
     rangePosition,
-    onRangePositionChange: handleRangePositionChange,
-    singleInputFieldRef
+    onRangePositionChange: handleRangePositionChange
   };
 };

package/internals/hooks/useStaticRangePicker/useStaticRangePicker.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
+import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { UseStaticRangePickerParams, UseStaticRangePickerProps } from './useStaticRangePicker.types';
 /**
  * Hook managing all the range static pickers:
  * - StaticDateRangePicker
  */
-export declare const useStaticRangePicker: <TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any, TExternalProps>>({ props, ref, ...pickerParams }: UseStaticRangePickerParams<TDate, TView, TExternalProps>) => {
+export declare const useStaticRangePicker: <TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any, TExternalProps>>({ props, ref, ...pickerParams }: UseStaticRangePickerParams<TDate, TView, TExternalProps>) => {
     renderPicker: () => React.JSX.Element;
 };

package/internals/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -47,6 +47,7 @@ export const useStaticRangePicker = _ref => {
   } = usePicker(_extends({}, pickerParams, {
     props,
     autoFocusView: autoFocus != null ? autoFocus : false,
+    fieldRef: undefined,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange

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

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import { BasePickerProps, UsePickerParams, ExportedBaseToolbarProps, StaticOnlyPickerProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
+import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout';
-import { DateRange } from '../../../models';
+import { RangeFieldSection, DateRange } from '../../../models';
 import { UseRangePositionProps } from '../useRangePosition';
-import { RangeFieldSection } from '../../models/fields';
-export interface UseStaticRangePickerSlots<TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<DateRange<TDate>, TDate, TView> {
+export interface UseStaticRangePickerSlots<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<DateRange<TDate>, TDate, TView> {
 }
-export interface UseStaticRangePickerSlotProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<DateRange<TDate>, TDate, TView> {
+export interface UseStaticRangePickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<DateRange<TDate>, TDate, TView> {
     toolbar?: ExportedBaseToolbarProps;
 }
 export interface StaticRangeOnlyPickerProps extends StaticOnlyPickerProps, UseRangePositionProps {
 }
-export interface UseStaticRangePickerProps<TDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any, TExternalProps>> extends BasePickerProps<DateRange<TDate>, TDate, TView, TError, TExternalProps, {}>, StaticRangeOnlyPickerProps {
+export interface UseStaticRangePickerProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any, TExternalProps>> extends BasePickerProps<DateRange<TDate>, TDate, TView, TError, TExternalProps, {}>, StaticRangeOnlyPickerProps {
     /**
      * Overridable components.
      * @default {}
@@ -23,7 +23,7 @@ export interface UseStaticRangePickerProps<TDate, TView extends DateOrTimeViewWi
      */
     slotProps?: UseStaticRangePickerSlotProps<TDate, TView>;
 }
-export interface UseStaticRangePickerParams<TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, RangeFieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
+export interface UseStaticRangePickerParams<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, RangeFieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
     props: TExternalProps;
     /**
      * Ref to pass to the root element

package/internals/models/dateRange.d.ts

@@ -1,10 +1,10 @@
-import { BaseDateValidationProps, DefaultizedProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
-import type { DateRangeValidationError, DateRange } from '../../models';
-import { RangeFieldSection } from './fields';
+import { BaseDateValidationProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { PickerValidDate } from '@mui/x-date-pickers/models';
+import type { DateRangeValidationError, RangeFieldSection, DateRange } from '../../models';
 /**
  * Props used to validate a day value in range pickers.
  */
-export interface DayRangeValidationProps<TDate> {
+export interface DayRangeValidationProps<TDate extends PickerValidDate> {
     /**
      * Disable specific date.
      *
@@ -17,16 +17,5 @@ export interface DayRangeValidationProps<TDate> {
      */
     shouldDisableDate?: (day: TDate, position: 'start' | 'end') => boolean;
 }
-/**
- * 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>, TDate, RangeFieldSection, DateRangeValidationError>, 'format'>, DayRangeValidationProps<TDate>, BaseDateValidationProps<TDate>, BaseRangeProps {
+export interface UseDateRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, 'unstableFieldRef'>, 'format'>, DayRangeValidationProps<TDate>, BaseDateValidationProps<TDate> {
 }
-export type UseDateRangeFieldDefaultizedProps<TDate> = DefaultizedProps<UseDateRangeFieldProps<TDate>, keyof BaseDateValidationProps<TDate> | 'format'>;

package/internals/models/dateTimeRange.d.ts

@@ -1,14 +1,13 @@
-import { BaseDateValidationProps, TimeValidationProps, DefaultizedProps, MakeOptional, UseFieldInternalProps, DateTimeValidationProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
-import { BaseRangeProps, DayRangeValidationProps } from './dateRange';
-import { DateTimeRangeValidationError, DateRange } from '../../models';
-import { RangeFieldSection } from './fields';
-export interface UseDateTimeRangeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, DateTimeRangeValidationError>, 'format'>, DayRangeValidationProps<TDate>, TimeValidationProps<TDate>, BaseDateValidationProps<TDate>, DateTimeValidationProps<TDate>, BaseRangeProps {
+import { BaseDateValidationProps, TimeValidationProps, MakeOptional, UseFieldInternalProps, DateTimeValidationProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
+import { PickerValidDate } from '@mui/x-date-pickers/models';
+import { DayRangeValidationProps } from './dateRange';
+import { DateTimeRangeValidationError, RangeFieldSection, DateRange } from '../../models';
+export interface UseDateTimeRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, DayRangeValidationProps<TDate>, TimeValidationProps<TDate>, BaseDateValidationProps<TDate>, DateTimeValidationProps<TDate> {
     /**
      * 12h/24h view for hour selection clock.
      * @default `utils.is12HourCycleInCurrentLocale()`
      */
     ampm?: boolean;
 }
-export type UseDateTimeRangeFieldDefaultizedProps<TDate> = DefaultizedProps<UseDateTimeRangeFieldProps<TDate>, keyof BaseDateValidationProps<TDate> | 'format' | 'disableIgnoringDatePartForTimeValidation'>;
 export type DateTimeRangePickerView = Exclude<DateOrTimeViewWithMeridiem, 'month' | 'year'>;
 export type DateTimeRangePickerViewExternal = Exclude<DateTimeRangePickerView, 'meridiem'>;

package/internals/models/index.d.ts

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

package/internals/models/index.js

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

package/internals/models/timeRange.d.ts

@@ -1,12 +1,10 @@
-import { BaseTimeValidationProps, TimeValidationProps, DefaultizedProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
-import { TimeRangeValidationError, DateRange } from '../../models';
-import { BaseRangeProps } from './dateRange';
-import { RangeFieldSection } from './fields';
-export interface UseTimeRangeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TimeRangeValidationError>, 'format'>, TimeValidationProps<TDate>, BaseTimeValidationProps, BaseRangeProps {
+import { BaseTimeValidationProps, TimeValidationProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { PickerValidDate } from '@mui/x-date-pickers/models';
+import { TimeRangeValidationError, RangeFieldSection, DateRange } from '../../models';
+export interface UseTimeRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, TimeValidationProps<TDate>, BaseTimeValidationProps {
     /**
      * 12h/24h view for hour selection clock.
      * @default `utils.is12HourCycleInCurrentLocale()`
      */
     ampm?: boolean;
 }
-export type UseTimeRangeFieldDefaultizedProps<TDate> = DefaultizedProps<UseTimeRangeFieldProps<TDate>, keyof BaseTimeValidationProps | 'format'>;

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

@@ -1,4 +1,4 @@
-import { RangeFieldSection } from '../models/fields';
+import { RangeFieldSection } from '../../models';
 export declare const splitDateRangeSections: (sections: RangeFieldSection[]) => {
     startDate: RangeFieldSection[];
     endDate: RangeFieldSection[];
@@ -15,10 +15,6 @@ export declare const removeLastSeparator: (dateSections: RangeFieldSection[]) =>
     hasLeadingZerosInFormat: boolean;
     hasLeadingZerosInInput: boolean;
     modified: boolean;
-    start: number;
-    end: number;
-    startInInput: number;
-    endInInput: number;
     startSeparator: string;
     endSeparator: string;
 })[];

package/internals/utils/date-range-manager.d.ts

@@ -1,6 +1,6 @@
-import { MuiPickersAdapter } from '@mui/x-date-pickers/models';
+import { MuiPickersAdapter, PickerValidDate } from '@mui/x-date-pickers/models';
 import { DateRange, RangePosition } from '../../models';
-interface CalculateRangeChangeOptions<TDate> {
+interface CalculateRangeChangeOptions<TDate extends PickerValidDate> {
     utils: MuiPickersAdapter<TDate>;
     range: DateRange<TDate>;
     newDate: TDate | null;
@@ -13,10 +13,10 @@ interface CalculateRangeChangeOptions<TDate> {
     allowRangeFlip?: boolean;
     shouldMergeDateAndTime?: boolean;
 }
-interface CalculateRangeChangeResponse<TDate> {
+interface CalculateRangeChangeResponse<TDate extends PickerValidDate> {
     nextSelection: RangePosition;
     newRange: DateRange<TDate>;
 }
-export declare function calculateRangeChange<TDate>({ utils, range, newDate: selectedDate, rangePosition, allowRangeFlip, shouldMergeDateAndTime, }: CalculateRangeChangeOptions<TDate>): CalculateRangeChangeResponse<TDate>;
-export declare function calculateRangePreview<TDate>(options: CalculateRangeChangeOptions<TDate>): DateRange<TDate>;
+export declare function calculateRangeChange<TDate extends PickerValidDate>({ utils, range, newDate: selectedDate, rangePosition, allowRangeFlip, shouldMergeDateAndTime, }: CalculateRangeChangeOptions<TDate>): CalculateRangeChangeResponse<TDate>;
+export declare function calculateRangePreview<TDate extends PickerValidDate>(options: CalculateRangeChangeOptions<TDate>): DateRange<TDate>;
 export {};

package/internals/utils/date-utils.d.ts

@@ -1,6 +1,6 @@
-import { MuiPickersAdapter } from '@mui/x-date-pickers/models';
+import { MuiPickersAdapter, PickerValidDate } from '@mui/x-date-pickers/models';
 import { DateRange, NonEmptyDateRange } from '../../models';
-export declare const isRangeValid: <TDate>(utils: MuiPickersAdapter<TDate, any>, range: DateRange<TDate> | null) => range is NonEmptyDateRange<TDate>;
-export declare const isWithinRange: <TDate>(utils: MuiPickersAdapter<TDate, any>, day: TDate, range: DateRange<TDate> | null) => boolean;
-export declare const isStartOfRange: <TDate>(utils: MuiPickersAdapter<TDate, any>, day: TDate, range: DateRange<TDate> | null) => boolean;
-export declare const isEndOfRange: <TDate>(utils: MuiPickersAdapter<TDate, any>, day: TDate, range: DateRange<TDate> | null) => boolean;
+export declare const isRangeValid: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate, any>, range: DateRange<TDate> | null) => range is NonEmptyDateRange<TDate>;
+export declare const isWithinRange: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate, any>, day: TDate, range: DateRange<TDate> | null) => boolean;
+export declare const isStartOfRange: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate, any>, day: TDate, range: DateRange<TDate> | null) => boolean;
+export declare const isEndOfRange: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate, any>, day: TDate, range: DateRange<TDate> | null) => boolean;