@mui/x-date-pickers-pro 8.0.0-alpha.0 → 8.0.0-alpha.10

package/internals/utils/createMultiInputRangeField/createMultiInputRangeField.types.d.ts

@@ -0,0 +1,72 @@
+import type { TypographyProps } from '@mui/material/Typography';
+import type { StackProps } from '@mui/material/Stack';
+import type { TextFieldProps } from '@mui/material/TextField';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { FieldType, MultiInputFieldRefs, RangeFieldSeparatorProps, RangePosition } from '../../../models';
+import { PickerAnyRangeManager } from '../../models/managers';
+export type MultiInputRangeFieldProps<TManager extends PickerAnyRangeManager> = MultiInputFieldRefs & RangeFieldSeparatorProps & Omit<PickerManagerFieldInternalProps<TManager>, 'unstableFieldRef' | 'clearable' | 'onClear'> & Omit<StackProps, 'position' | keyof PickerManagerFieldInternalProps<TManager>> & {
+    /**
+     * If `true`, the field is focused during the first mount.
+     * @default false
+     */
+    autoFocus?: boolean;
+    className?: string;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<MultiInputRangeFieldClasses>;
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: MultiInputRangeFieldSlots;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: MultiInputRangeFieldSlotProps;
+};
+export interface MultiInputRangeFieldSlots {
+    /**
+     * Element rendered at the root.
+     * @default MultiInputRangeFieldRoot
+     */
+    root?: React.ElementType;
+    /**
+     * Form control with an input to render a date.
+     * It is rendered twice: once for the start date and once for the end date.
+     * @default <PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
+     */
+    textField?: React.ElementType;
+    /**
+     * Element rendered between the two inputs.
+     * @default MultiInputRangeFieldSeparator
+     */
+    separator?: React.ElementType;
+}
+export interface MultiInputRangeFieldSlotProps {
+    root?: SlotComponentPropsFromProps<StackProps, {}, FieldOwnerState>;
+    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState & {
+        position: RangePosition;
+    }>;
+    separator?: SlotComponentPropsFromProps<TypographyProps, {}, FieldOwnerState>;
+}
+export interface MultiInputRangeFieldClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the separator element. */
+    separator: string;
+}
+export interface CreateMultiInputRangeFieldParameters<TManager extends PickerAnyRangeManager> {
+    name: string;
+    getUtilityClass: (slot: string) => string;
+    useManager: (params: RangeFieldSeparatorProps & {
+        enableAccessibleFieldDOMStructure: PickerManagerEnableAccessibleFieldDOMStructure<TManager>;
+    }) => TManager;
+}
+export type CreateMultiInputRangeFieldReturnValue<TManager extends PickerAnyRangeManager> = ((props: MultiInputRangeFieldProps<TManager> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+    fieldType?: FieldType;
+};

package/internals/utils/createMultiInputRangeField/index.d.ts

@@ -0,0 +1,3 @@
+export { createMultiInputRangeField } from './createMultiInputRangeField';
+export type { MultiInputRangeFieldProps, MultiInputRangeFieldSlots, MultiInputRangeFieldSlotProps, MultiInputRangeFieldClasses, } from './createMultiInputRangeField.types';
+export { useMultiInputRangeField as unstable_useMultiInputRangeField } from '../../../hooks/useMultiInputRangeField/useMultiInputRangeField';

package/internals/utils/createMultiInputRangeField/index.js

@@ -0,0 +1,2 @@
+export { createMultiInputRangeField } from "./createMultiInputRangeField.js";
+export { useMultiInputRangeField as unstable_useMultiInputRangeField } from "../../../hooks/useMultiInputRangeField/useMultiInputRangeField.js";

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

@@ -1,11 +1,11 @@
-import { RangeFieldSection } from '../../models';
-export declare const splitDateRangeSections: (sections: RangeFieldSection[]) => {
-    startDate: RangeFieldSection[];
-    endDate: RangeFieldSection[];
+import { FieldRangeSection } from '@mui/x-date-pickers/internals';
+export declare const splitDateRangeSections: (sections: FieldRangeSection[]) => {
+    startDate: FieldRangeSection[];
+    endDate: FieldRangeSection[];
 };
-export declare const removeLastSeparator: (dateSections: RangeFieldSection[]) => (RangeFieldSection | {
+export declare const removeLastSeparator: (dateSections: FieldRangeSection[]) => (FieldRangeSection | {
     separator: null;
-    dateName: import("../..").RangePosition;
+    dateName: import("@mui/x-date-pickers/internals").RangePosition;
     value: string;
     format: string;
     maxLength: number | null;

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

@@ -13,11 +13,12 @@ interface CalculateRangeChangeOptions {
      */
     allowRangeFlip?: boolean;
     shouldMergeDateAndTime?: boolean;
+    referenceDate?: PickerValidDate;
 }
 interface CalculateRangeChangeResponse {
     nextSelection: RangePosition;
     newRange: PickerRangeValue;
 }
-export declare function calculateRangeChange({ utils, range, newDate: selectedDate, rangePosition, allowRangeFlip, shouldMergeDateAndTime, }: CalculateRangeChangeOptions): CalculateRangeChangeResponse;
+export declare function calculateRangeChange({ utils, range, newDate: selectedDate, rangePosition, allowRangeFlip, shouldMergeDateAndTime, referenceDate, }: CalculateRangeChangeOptions): CalculateRangeChangeResponse;
 export declare function calculateRangePreview(options: CalculateRangeChangeOptions): PickerRangeValue;
 export {};

package/internals/utils/date-range-manager.js

@@ -5,9 +5,11 @@ export function calculateRangeChange({
   newDate: selectedDate,
   rangePosition,
   allowRangeFlip = false,
-  shouldMergeDateAndTime = false
+  shouldMergeDateAndTime = false,
+  referenceDate
 }) {
-  const [start, end] = range;
+  const start = !utils.isValid(range[0]) ? null : range[0];
+  const end = !utils.isValid(range[1]) ? null : range[1];
   if (shouldMergeDateAndTime && selectedDate) {
     // If there is a date already selected, then we want to keep its time
     if (start && rangePosition === 'start') {
@@ -17,29 +19,30 @@ export function calculateRangeChange({
       selectedDate = mergeDateAndTime(utils, selectedDate, end);
     }
   }
+  const newSelectedDate = referenceDate && selectedDate && shouldMergeDateAndTime ? mergeDateAndTime(utils, selectedDate, referenceDate) : selectedDate;
   if (rangePosition === 'start') {
     const truthyResult = allowRangeFlip ? {
       nextSelection: 'start',
-      newRange: [end, selectedDate]
+      newRange: [end, newSelectedDate]
     } : {
       nextSelection: 'end',
-      newRange: [selectedDate, null]
+      newRange: [newSelectedDate, null]
     };
-    return Boolean(end) && utils.isAfter(selectedDate, end) ? truthyResult : {
+    return Boolean(end) && utils.isAfter(newSelectedDate, end) ? truthyResult : {
       nextSelection: 'end',
-      newRange: [selectedDate, end]
+      newRange: [newSelectedDate, end]
     };
   }
   const truthyResult = allowRangeFlip ? {
     nextSelection: 'end',
-    newRange: [selectedDate, start]
+    newRange: [newSelectedDate, start]
   } : {
     nextSelection: 'end',
-    newRange: [selectedDate, null]
+    newRange: [newSelectedDate, null]
   };
-  return Boolean(start) && utils.isBeforeDay(selectedDate, start) ? truthyResult : {
+  return Boolean(start) && utils.isBeforeDay(newSelectedDate, start) ? truthyResult : {
     nextSelection: 'start',
-    newRange: [start, selectedDate]
+    newRange: [start, newSelectedDate]
   };
 }
 export function calculateRangePreview(options) {

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczMTUzODgwMDAwMA==";
+  const releaseInfo = "MTczODI5OTYwMDAwMA==";
   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/internals/utils/valueManagers.d.ts

@@ -1,7 +1,8 @@
 import { PickerValueManager, FieldValueManager, PickerRangeValue } from '@mui/x-date-pickers/internals';
-import type { DateRangeValidationError, DateTimeRangeValidationError, TimeRangeValidationError, RangeFieldSection } from '../../models';
-export type RangePickerValueManager<TValue = [any, any], TError extends DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError = any> = PickerValueManager<TValue, TError>;
+import type { DateRangeValidationError, DateTimeRangeValidationError, TimeRangeValidationError } from '../../models';
+type RangePickerValueManager<TError extends DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError = any> = PickerValueManager<PickerRangeValue, TError>;
 export declare const rangeValueManager: RangePickerValueManager;
 export declare const getRangeFieldValueManager: ({ dateSeparator, }: {
     dateSeparator: string | undefined;
-}) => FieldValueManager<PickerRangeValue, RangeFieldSection>;
+}) => FieldValueManager<PickerRangeValue>;
+export {};

package/internals/utils/valueManagers.js

@@ -12,8 +12,8 @@ export const rangeValueManager = {
         referenceDate: referenceDateProp
       } = _ref,
       params = _objectWithoutPropertiesLoose(_ref, _excluded);
-    const shouldKeepStartDate = value[0] != null && params.utils.isValid(value[0]);
-    const shouldKeepEndDate = value[1] != null && params.utils.isValid(value[1]);
+    const shouldKeepStartDate = params.utils.isValid(value[0]);
+    const shouldKeepEndDate = params.utils.isValid(value[1]);
     if (shouldKeepStartDate && shouldKeepEndDate) {
       return value;
     }
@@ -26,8 +26,8 @@ export const rangeValueManager = {
   hasError: error => error[0] != null || error[1] != null,
   defaultErrorState: [null, null],
   getTimezone: (utils, value) => {
-    const timezoneStart = value[0] == null || !utils.isValid(value[0]) ? null : utils.getTimezone(value[0]);
-    const timezoneEnd = value[1] == null || !utils.isValid(value[1]) ? null : utils.getTimezone(value[1]);
+    const timezoneStart = utils.isValid(value[0]) ? utils.getTimezone(value[0]) : null;
+    const timezoneEnd = utils.isValid(value[1]) ? utils.getTimezone(value[1]) : null;
     if (timezoneStart != null && timezoneEnd != null && timezoneStart !== timezoneEnd) {
       throw new Error('MUI X: The timezone of the start and the end date should be the same.');
     }
@@ -39,8 +39,8 @@ export const getRangeFieldValueManager = ({
   dateSeparator = '–'
 }) => ({
   updateReferenceValue: (utils, value, prevReferenceValue) => {
-    const shouldKeepStartDate = value[0] != null && utils.isValid(value[0]);
-    const shouldKeepEndDate = value[1] != null && utils.isValid(value[1]);
+    const shouldKeepStartDate = utils.isValid(value[0]);
+    const shouldKeepEndDate = utils.isValid(value[1]);
     if (!shouldKeepStartDate && !shouldKeepEndDate) {
       return prevReferenceValue;
     }
@@ -111,7 +111,7 @@ export const getRangeFieldValueManager = ({
       },
       getNewValuesFromNewActiveDate: newActiveDate => ({
         value: updateDateInRange(newActiveDate, state.value),
-        referenceValue: newActiveDate == null || !utils.isValid(newActiveDate) ? state.referenceValue : updateDateInRange(newActiveDate, state.referenceValue)
+        referenceValue: !utils.isValid(newActiveDate) ? state.referenceValue : updateDateInRange(newActiveDate, state.referenceValue)
       })
     };
   }

package/managers/index.d.ts

@@ -0,0 +1,6 @@
+export { useDateRangeManager } from './useDateRangeManager';
+export type { UseDateRangeManagerReturnValue, UseDateRangeManagerParameters, DateRangeManagerFieldInternalProps, } from './useDateRangeManager';
+export { useTimeRangeManager } from './useTimeRangeManager';
+export type { UseTimeRangeManagerReturnValue, UseTimeRangeManagerParameters, TimeRangeManagerFieldInternalProps, } from './useTimeRangeManager';
+export { useDateTimeRangeManager } from './useDateTimeRangeManager';
+export type { UseDateTimeRangeManagerReturnValue, UseDateTimeRangeManagerParameters, DateTimeRangeManagerFieldInternalProps, } from './useDateTimeRangeManager';

package/managers/index.js

@@ -0,0 +1,3 @@
+export { useDateRangeManager } from "./useDateRangeManager.js";
+export { useTimeRangeManager } from "./useTimeRangeManager.js";
+export { useDateTimeRangeManager } from "./useDateTimeRangeManager.js";

package/managers/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/managers/index.js",
+  "types": "./index.d.ts"
+}

package/managers/useDateRangeManager.d.ts

@@ -0,0 +1,15 @@
+import type { MakeOptional } from '@mui/x-internals/types';
+import { PickerManager } from '@mui/x-date-pickers/models';
+import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { DateRangeValidationError, RangeFieldSeparatorProps } from '../models';
+import { ExportedValidateDateRangeProps, ValidateDateRangeProps } from '../validation/validateDateRange';
+export declare function useDateRangeManager<TEnableAccessibleFieldDOMStructure extends boolean = true>(parameters?: UseDateRangeManagerParameters<TEnableAccessibleFieldDOMStructure>): UseDateRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure>;
+export interface UseDateRangeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> extends RangeFieldSeparatorProps {
+    enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
+}
+export type UseDateRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError, DateRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>, DateRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure>>;
+export interface DateRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, 'format'>, RangeFieldSeparatorProps, ExportedValidateDateRangeProps {
+}
+interface DateRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure extends boolean> extends UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, ValidateDateRangeProps, RangeFieldSeparatorProps {
+}
+export {};

package/managers/useDateRangeManager.js

@@ -0,0 +1,33 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getDateFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
+import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
+import { validateDateRange } from "../validation/index.js";
+export function useDateRangeManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true,
+    dateSeparator
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'date',
+    validator: validateDateRange,
+    internal_valueManager: rangeValueManager,
+    internal_fieldValueManager: getRangeFieldValueManager({
+      dateSeparator
+    }),
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_applyDefaultsToFieldInternalProps: ({
+      internalProps,
+      utils,
+      defaultDates
+    }) => _extends({}, internalProps, getDateFieldInternalPropsDefaults({
+      defaultDates,
+      utils,
+      internalProps
+    })),
+    // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
+    internal_getOpenPickerButtonAriaLabel: () => ''
+  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}

package/managers/useDateTimeRangeManager.d.ts

@@ -0,0 +1,15 @@
+import type { MakeOptional } from '@mui/x-internals/types';
+import { PickerManager } from '@mui/x-date-pickers/models';
+import { AmPmProps, PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { DateTimeRangeValidationError, RangeFieldSeparatorProps } from '../models';
+import { ExportedValidateDateTimeRangeProps, ValidateDateTimeRangeProps } from '../validation/validateDateTimeRange';
+export declare function useDateTimeRangeManager<TEnableAccessibleFieldDOMStructure extends boolean = true>(parameters?: UseDateTimeRangeManagerParameters<TEnableAccessibleFieldDOMStructure>): UseDateTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure>;
+export interface UseDateTimeRangeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> extends RangeFieldSeparatorProps {
+    enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
+}
+export type UseDateTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError, DateTimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>, DateTimeRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure>>;
+export interface DateTimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, 'format'>, ExportedValidateDateTimeRangeProps, AmPmProps, RangeFieldSeparatorProps {
+}
+interface DateTimeRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure extends boolean> extends UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, ValidateDateTimeRangeProps, RangeFieldSeparatorProps {
+}
+export {};

package/managers/useDateTimeRangeManager.js

@@ -0,0 +1,33 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getDateTimeFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
+import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
+import { validateDateTimeRange } from "../validation/index.js";
+export function useDateTimeRangeManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true,
+    dateSeparator
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'date-time',
+    validator: validateDateTimeRange,
+    internal_valueManager: rangeValueManager,
+    internal_fieldValueManager: getRangeFieldValueManager({
+      dateSeparator
+    }),
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_applyDefaultsToFieldInternalProps: ({
+      internalProps,
+      utils,
+      defaultDates
+    }) => _extends({}, internalProps, getDateTimeFieldInternalPropsDefaults({
+      internalProps,
+      utils,
+      defaultDates
+    })),
+    // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
+    internal_getOpenPickerButtonAriaLabel: () => ''
+  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}

package/managers/useTimeRangeManager.d.ts

@@ -0,0 +1,15 @@
+import type { MakeOptional } from '@mui/x-internals/types';
+import { PickerManager } from '@mui/x-date-pickers/models';
+import { AmPmProps, PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { TimeRangeValidationError, RangeFieldSeparatorProps } from '../models';
+import { ExportedValidateTimeRangeProps, ValidateTimeRangeProps } from '../validation/validateTimeRange';
+export declare function useTimeRangeManager<TEnableAccessibleFieldDOMStructure extends boolean = true>(parameters?: UseTimeRangeManagerParameters<TEnableAccessibleFieldDOMStructure>): UseTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure>;
+export interface UseTimeRangeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> extends RangeFieldSeparatorProps {
+    enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
+}
+export type UseTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError, TimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>, TimeRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure>>;
+export interface TimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, 'format'>, ExportedValidateTimeRangeProps, AmPmProps, RangeFieldSeparatorProps {
+}
+interface TimeRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure extends boolean> extends UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, ValidateTimeRangeProps {
+}
+export {};

package/managers/useTimeRangeManager.js

@@ -0,0 +1,31 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getTimeFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
+import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
+import { validateTimeRange } from "../validation/index.js";
+export function useTimeRangeManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true,
+    dateSeparator
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'time',
+    validator: validateTimeRange,
+    internal_valueManager: rangeValueManager,
+    internal_fieldValueManager: getRangeFieldValueManager({
+      dateSeparator
+    }),
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_applyDefaultsToFieldInternalProps: ({
+      internalProps,
+      utils
+    }) => _extends({}, internalProps, getTimeFieldInternalPropsDefaults({
+      utils,
+      internalProps
+    })),
+    // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
+    internal_getOpenPickerButtonAriaLabel: () => ''
+  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}

package/models/fields.d.ts

@@ -1,11 +1,7 @@
 import * as React from 'react';
-import { UseFieldResponse, FormProps } from '@mui/x-date-pickers/internals';
-import { FieldRef, FieldSection, PickerFieldSlotProps } from '@mui/x-date-pickers/models';
-import { UseClearableFieldResponse } from '@mui/x-date-pickers/hooks';
-import { RangePosition } from './range';
-export interface RangeFieldSection extends FieldSection {
-    dateName: RangePosition;
-}
+import { UseFieldResponse, FormProps, PickerValue, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { FieldRef, PickerFieldSlotProps } from '@mui/x-date-pickers/models';
+export type { FieldRangeSection } from '@mui/x-date-pickers/internals';
 export type FieldType = 'single-input' | 'multi-input';
 /**
  * Props the `textField` slot of the multi input field can receive when used inside a picker.
@@ -30,8 +26,8 @@ export interface MultiInputFieldSlotRootProps {
     onBlur?: React.FocusEventHandler;
 }
 export interface MultiInputFieldRefs {
-    unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
-    unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
+    unstableStartFieldRef?: React.Ref<FieldRef<PickerValue>>;
+    unstableEndFieldRef?: React.Ref<FieldRef<PickerValue>>;
 }
 export interface RangeFieldSeparatorProps {
     /**
@@ -43,9 +39,9 @@ export interface RangeFieldSeparatorProps {
 /**
  * Props the `slotProps.field` of a range picker component can receive.
  */
-export type PickerRangeFieldSlotProps<TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean> = PickerFieldSlotProps<TValue, TSection, TEnableAccessibleFieldDOMStructure> & RangeFieldSeparatorProps;
+export type PickerRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> = PickerFieldSlotProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure> & RangeFieldSeparatorProps;
 /**
  * Props the text field receives when used with a multi input picker.
  * Only contains what the MUI components are passing to the text field, not what users can pass using the `props.slotProps.textField`.
  */
-export type BaseMultiInputPickersTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = UseClearableFieldResponse<UseFieldResponse<TEnableAccessibleFieldDOMStructure, MultiInputFieldSlotTextFieldProps>>;
+export type BaseMultiInputPickersTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = Omit<UseFieldResponse<TEnableAccessibleFieldDOMStructure, MultiInputFieldSlotTextFieldProps>, 'slots' | 'slotProps' | 'clearable' | 'onClear' | 'openPickerButtonPosition' | 'clearButtonPosition' | 'openPickerAriaLabel'>;

package/models/index.d.ts

@@ -1,5 +1,4 @@
-export * from './dateRange';
 export * from './fields';
 export * from './range';
 export * from './validation';
-export * from './multiInputRangeFieldClasses';
+export type { RangePosition } from '@mui/x-date-pickers/internals';

package/models/index.js

@@ -1,5 +1,4 @@
-export * from "./dateRange.js";
 export * from "./fields.js";
 export * from "./range.js";
 export * from "./validation.js";
-export * from "./multiInputRangeFieldClasses.js";
+export {};

package/models/range.d.ts

@@ -1,4 +1,2 @@
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 export type DateRange<TDate extends PickerValidDate> = [TDate | null, TDate | null];
-export type NonEmptyDateRange = [PickerValidDate, PickerValidDate];
-export type RangePosition = 'start' | 'end';

package/modern/{AdapterDateFnsJalaliV3 → AdapterDateFnsJalaliV2}/index.js

@@ -1 +1 @@
-export { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV3';
+export { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV2';

package/modern/{AdapterDateFnsV3 → AdapterDateFnsV2}/index.js

@@ -1 +1 @@
-export { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+export { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV2';

package/modern/DateRangeCalendar/DateRangeCalendar.js

@@ -15,7 +15,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
 import { Watermark } from '@mui/x-license';
-import { applyDefaultDate, DayCalendar, useDefaultReduceAnimations, useCalendarState, useDefaultDates, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValueWithTimezone, useViews, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
+import { applyDefaultDate, DayCalendar, useReduceAnimations, useCalendarState, useDefaultDates, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValueWithTimezone, useViews, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
 import { warnOnce } from '@mui/x-internals/warning';
 import { getReleaseInfo } from "../internals/utils/releaseInfo.js";
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from "./dateRangeCalendarClasses.js";
@@ -27,6 +27,7 @@ import { useDragRange } from "./useDragRange.js";
 import { useRangePosition } from "../internals/hooks/useRangePosition.js";
 import { DAY_RANGE_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.js";
 import { PickersRangeCalendarHeader } from "../PickersRangeCalendarHeader/index.js";
+import { useNullablePickerRangePositionContext } from "../internals/hooks/useNullablePickerRangePositionContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
 const DateRangeCalendarRoot = styled('div', {
@@ -75,16 +76,16 @@ const DayCalendarForRange = InnerDayCalendarForRange;
 function useDateRangeCalendarDefaultizedProps(props, name) {
   const utils = useUtils();
   const defaultDates = useDefaultDates();
-  const defaultReduceAnimations = useDefaultReduceAnimations();
   const themeProps = useThemeProps({
     props,
     name
   });
+  const reduceAnimations = useReduceAnimations(themeProps.reduceAnimations);
   return _extends({}, themeProps, {
     renderLoading: themeProps.renderLoading ?? (() => /*#__PURE__*/_jsx("span", {
       children: "..."
     })),
-    reduceAnimations: themeProps.reduceAnimations ?? defaultReduceAnimations,
+    reduceAnimations,
     loading: props.loading ?? false,
     disablePast: props.disablePast ?? false,
     disableFuture: props.disableFuture ?? false,
@@ -135,8 +136,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       reduceAnimations,
       onMonthChange,
       rangePosition: rangePositionProp,
-      defaultRangePosition: inDefaultRangePosition,
-      onRangePositionChange: inOnRangePositionChange,
+      defaultRangePosition: defaultRangePositionProp,
+      onRangePositionChange: onRangePositionChangeProp,
       calendars,
       currentMonthCalendarPosition = 1,
       slots,
@@ -161,6 +162,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       onViewChange
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rangePositionContext = useNullablePickerRangePositionContext();
   const {
     value,
     handleValueChange,
@@ -169,6 +171,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     name: 'DateRangeCalendar',
     timezone: timezoneProp,
     value: valueProp,
+    referenceDate,
     defaultValue,
     onChange,
     valueManager: rangeValueManager
@@ -189,15 +192,15 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   const id = useId();
   const {
     rangePosition,
-    onRangePositionChange
+    setRangePosition
   } = useRangePosition({
-    rangePosition: rangePositionProp,
-    defaultRangePosition: inDefaultRangePosition,
-    onRangePositionChange: inOnRangePositionChange
+    rangePosition: rangePositionProp ?? rangePositionContext?.rangePosition,
+    defaultRangePosition: defaultRangePositionProp,
+    onRangePositionChange: onRangePositionChangeProp ?? rangePositionContext?.setRangePosition
   });
   const handleDatePositionChange = useEventCallback(position => {
     if (rangePosition !== position) {
-      onRangePositionChange(position);
+      setRangePosition(position);
     }
   });
   const handleSelectedDayChange = useEventCallback((newDate, selectionState, allowRangeFlip = false) => {
@@ -210,11 +213,12 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       range: value,
       rangePosition,
       allowRangeFlip,
-      shouldMergeDateAndTime: true
+      shouldMergeDateAndTime: true,
+      referenceDate
     });
     const isNextSectionAvailable = availableRangePositions.includes(nextSelection);
     if (isNextSectionAvailable) {
-      onRangePositionChange(nextSelection);
+      setRangePosition(nextSelection);
     }
     const isFullRangeSelected = rangePosition === 'end' && isRangeValid(utils, newRange);
     setValueAndGoToNextView(newRange, isFullRangeSelected || !isNextSectionAvailable ? 'finish' : 'partial', view);
@@ -226,7 +230,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
 
   // Range going for the start of the start day to the end of the end day.
   // This makes sure that `isWithinRange` works with any time in the start and end day.
-  const valueDayRange = React.useMemo(() => [value[0] == null || !utils.isValid(value[0]) ? value[0] : utils.startOfDay(value[0]), value[1] == null || !utils.isValid(value[1]) ? value[1] : utils.endOfDay(value[1])], [value, utils]);
+  const valueDayRange = React.useMemo(() => [!utils.isValid(value[0]) ? value[0] : utils.startOfDay(value[0]), !utils.isValid(value[1]) ? value[1] : utils.endOfDay(value[1])], [value, utils]);
   const _useDragRange = useDragRange({
       disableDragEditing: shouldDisableDragEditing,
       onDrop: handleDrop,
@@ -314,7 +318,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   const prevValue = React.useRef(null);
   React.useEffect(() => {
     const date = rangePosition === 'start' ? value[0] : value[1];
-    if (!date || !utils.isValid(date)) {
+    if (!utils.isValid(date)) {
       return;
     }
     const prevDate = rangePosition === 'start' ? prevValue.current?.[0] : prevValue.current?.[1];

package/modern/DateRangePicker/DateRangePicker.js

@@ -63,7 +63,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   calendars: PropTypes.oneOf([1, 2, 3]),
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
+   * If `true`, the Picker will close after submitting the full date.
    * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
    */
   closeOnSelect: PropTypes.bool,
@@ -158,12 +158,10 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
-   * Ignored if the field has several inputs.
    */
   inputRef: refType,
   /**
    * The label content.
-   * Ignored if the field has several inputs.
    */
   label: PropTypes.node,
   /**
@@ -189,7 +187,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   minDate: PropTypes.object,
   /**
    * Name attribute used by the `input` element in the Field.
-   * Ignored if the field has several inputs.
    */
   name: PropTypes.string,
   /**