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

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.d.ts

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { UseMobileRangePickerParams, UseMobileRangePickerProps } from './useMobileRangePicker.types';
-export declare const useMobileRangePicker: <TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseMobileRangePickerProps<TDate, TView, any, TExternalProps>>({ props, ...pickerParams }: UseMobileRangePickerParams<TDate, TView, TExternalProps>) => {
+export declare const useMobileRangePicker: <TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps<TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, ...pickerParams }: UseMobileRangePickerParams<TDate, TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
     renderPicker: () => React.JSX.Element;
 };

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -28,6 +28,9 @@ export const useMobileRangePicker = _ref => {
     sx,
     format,
     formatDensity,
+    enableAccessibleFieldDOMStructure,
+    selectedSections,
+    onSelectedSectionsChange,
     timezone,
     label,
     inputRef,
@@ -37,11 +40,13 @@ export const useMobileRangePicker = _ref => {
     disableOpenPicker,
     localeText
   } = props;
+  const startFieldRef = React.useRef(null);
+  const endFieldRef = React.useRef(null);
+  const fieldType = (_fieldType = slots.field.fieldType) != null ? _fieldType : 'multi-input';
   const {
     rangePosition,
-    onRangePositionChange,
-    singleInputFieldRef
-  } = useRangePosition(props);
+    onRangePositionChange
+  } = useRangePosition(props, fieldType === 'single-input' ? startFieldRef : undefined);
   const labelId = useId();
   const contextLocaleText = useLocaleText();
   const {
@@ -54,13 +59,13 @@ export const useMobileRangePicker = _ref => {
     props,
     wrapperVariant: 'mobile',
     autoFocusView: true,
+    fieldRef: rangePosition === 'start' ? startFieldRef : endFieldRef,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange
     }
   }));
   const Field = slots.field;
-  const fieldType = (_fieldType = Field.fieldType) != null ? _fieldType : 'multi-input';
   const fieldProps = useSlotProps({
     elementType: Field,
     externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.field,
@@ -71,11 +76,14 @@ export const useMobileRangePicker = _ref => {
       sx,
       format,
       formatDensity,
+      enableAccessibleFieldDOMStructure,
+      selectedSections,
+      onSelectedSectionsChange,
       timezone
-    }, fieldType === 'single-input' && {
+    }, inputRef ? {
       inputRef,
       name
-    }),
+    } : {}),
     ownerState: props
   });
   const isToolbarHidden = (_innerSlotProps$toolb = innerSlotProps == null || (_innerSlotProps$toolb2 = innerSlotProps.toolbar) == null ? void 0 : _innerSlotProps$toolb2.hidden) != null ? _innerSlotProps$toolb : false;
@@ -91,10 +99,11 @@ export const useMobileRangePicker = _ref => {
     localeText,
     rangePosition,
     onRangePositionChange,
-    singleInputFieldRef,
     pickerSlots: slots,
     pickerSlotProps: innerSlotProps,
-    fieldProps
+    fieldProps,
+    startFieldRef,
+    endFieldRef
   });
   const slotPropsForLayout = _extends({}, innerSlotProps, {
     tabs: _extends({}, innerSlotProps == null ? void 0 : innerSlotProps.tabs, {

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

@@ -3,11 +3,11 @@ import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { RangeOnlyPickerProps, RangePickerAdditionalViewProps, UseRangePickerParams, UseRangePickerProps, UseRangePickerSlotProps, UseRangePickerSlots } from '../models/useRangePicker';
 export interface UseMobileRangePickerSlots<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends UseRangePickerSlots<TDate, TView>, PickersModalDialogSlots {
 }
-export interface UseMobileRangePickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends UseRangePickerSlotProps<TDate, TView>, PickersModalDialogSlotProps {
+export interface UseMobileRangePickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends UseRangePickerSlotProps<TDate, TView, TEnableAccessibleFieldDOMStructure>, PickersModalDialogSlotProps {
 }
-export interface MobileRangeOnlyPickerProps<TDate extends PickerValidDate> extends RangeOnlyPickerProps<TDate> {
+export interface MobileRangeOnlyPickerProps extends RangeOnlyPickerProps {
 }
-export interface UseMobileRangePickerProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<any, any, TView, any, any>> extends UseRangePickerProps<TDate, TView, TError, TExternalProps, MobileRangePickerAdditionalViewProps> {
+export interface UseMobileRangePickerProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, any, TView, any, any>> extends UseRangePickerProps<TDate, TView, TError, TExternalProps, MobileRangePickerAdditionalViewProps> {
     /**
      * Overridable component slots.
      * @default {}
@@ -17,9 +17,9 @@ export interface UseMobileRangePickerProps<TDate extends PickerValidDate, TView
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: UseMobileRangePickerSlotProps<TDate, TView>;
+    slotProps?: UseMobileRangePickerSlotProps<TDate, TView, TEnableAccessibleFieldDOMStructure>;
 }
 export interface MobileRangePickerAdditionalViewProps extends RangePickerAdditionalViewProps {
 }
-export interface UseMobileRangePickerParams<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseMobileRangePickerProps<TDate, TView, any, TExternalProps>> extends UseRangePickerParams<TDate, TView, TExternalProps, MobileRangePickerAdditionalViewProps> {
+export interface UseMobileRangePickerParams<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps<TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends UseRangePickerParams<TDate, TView, TExternalProps, MobileRangePickerAdditionalViewProps> {
 }

package/internals/hooks/useMultiInputFieldSelectedSections.d.ts

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

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,4 +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 extends PickerValidDate, 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,5 +1,4 @@
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import type { UseMultiInputDateTimeRangeFieldDefaultizedProps, UseMultiInputDateTimeRangeFieldParams, UseMultiInputDateTimeRangeFieldProps } from '../../../MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types';
+import type { UseMultiInputDateTimeRangeFieldParams } from '../../../MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types';
 import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types';
-export declare const useDefaultizedDateTimeRangeFieldProps: <TDate extends PickerValidDate, AdditionalProps extends {}>(props: UseMultiInputDateTimeRangeFieldProps<TDate>) => UseMultiInputDateTimeRangeFieldDefaultizedProps<TDate, AdditionalProps>;
-export declare const useMultiInputDateTimeRangeField: <TDate extends PickerValidDate, 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,5 +1,4 @@
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import type { UseMultiInputTimeRangeFieldDefaultizedProps, UseMultiInputTimeRangeFieldParams, UseMultiInputTimeRangeFieldProps } from '../../../MultiInputTimeRangeField/MultiInputTimeRangeField.types';
+import type { UseMultiInputTimeRangeFieldParams } from '../../../MultiInputTimeRangeField/MultiInputTimeRangeField.types';
 import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types';
-export declare const useDefaultizedTimeRangeFieldProps: <TDate extends PickerValidDate, AdditionalProps extends {}>(props: UseMultiInputTimeRangeFieldProps<TDate>) => UseMultiInputTimeRangeFieldDefaultizedProps<TDate, AdditionalProps>;
-export declare const useMultiInputTimeRangeField: <TDate extends PickerValidDate, 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.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

@@ -2,9 +2,8 @@ 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 extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<DateRange<TDate>, TDate, TView> {
 }
 export interface UseStaticRangePickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<DateRange<TDate>, TDate, TView> {

package/internals/models/dateRange.d.ts

@@ -1,7 +1,6 @@
-import { BaseDateValidationProps, DefaultizedProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { BaseDateValidationProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import type { DateRangeValidationError, DateRange } from '../../models';
-import { RangeFieldSection } from './fields';
+import type { DateRangeValidationError, RangeFieldSection, DateRange } from '../../models';
 /**
  * Props used to validate a day value in range pickers.
  */
@@ -18,16 +17,5 @@ export interface DayRangeValidationProps<TDate extends PickerValidDate> {
      */
     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 PickerValidDate> 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 extends PickerValidDate> = DefaultizedProps<UseDateRangeFieldProps<TDate>, keyof BaseDateValidationProps<TDate> | 'format'>;

package/internals/models/dateTimeRange.d.ts

@@ -1,15 +1,13 @@
-import { BaseDateValidationProps, TimeValidationProps, DefaultizedProps, MakeOptional, UseFieldInternalProps, DateTimeValidationProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
+import { BaseDateValidationProps, TimeValidationProps, MakeOptional, UseFieldInternalProps, DateTimeValidationProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import { BaseRangeProps, DayRangeValidationProps } from './dateRange';
-import { DateTimeRangeValidationError, DateRange } from '../../models';
-import { RangeFieldSection } from './fields';
-export interface UseDateTimeRangeFieldProps<TDate extends PickerValidDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, DateTimeRangeValidationError>, 'format'>, DayRangeValidationProps<TDate>, TimeValidationProps<TDate>, BaseDateValidationProps<TDate>, DateTimeValidationProps<TDate>, BaseRangeProps {
+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 extends PickerValidDate> = 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';