@mui/x-date-pickers-pro 7.22.3 → 8.0.0-alpha.1

package/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -5,10 +5,10 @@ import * as React from 'react';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
-import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { onSpaceOrEnter } from '@mui/x-date-pickers/internals';
 const useMultiInputFieldSlotProps = ({
-  wrapperVariant,
+  variant,
   open,
   actions,
   readOnly,
@@ -28,12 +28,12 @@ const useMultiInputFieldSlotProps = ({
   startFieldRef,
   endFieldRef
 }) => {
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const handleStartFieldRef = useForkRef(fieldProps.unstableStartFieldRef, startFieldRef);
   const handleEndFieldRef = useForkRef(fieldProps.unstableEndFieldRef, endFieldRef);
   const previousRangePosition = React.useRef(rangePosition);
   React.useEffect(() => {
-    if (!open) {
+    if (!open || variant === 'mobile') {
       return;
     }
     const currentFieldRef = rangePosition === 'start' ? startFieldRef : endFieldRef;
@@ -49,7 +49,7 @@ const useMultiInputFieldSlotProps = ({
     // use the current view or `0` when the range position has just been swapped
     previousRangePosition.current === rangePosition ? currentView : 0);
     previousRangePosition.current = rangePosition;
-  }, [rangePosition, open, currentView, startFieldRef, endFieldRef]);
+  }, [rangePosition, open, currentView, startFieldRef, endFieldRef, variant]);
   const openRangeStartSelection = event => {
     event.stopPropagation();
     onRangePositionChange('start');
@@ -98,7 +98,7 @@ const useMultiInputFieldSlotProps = ({
           focused: open ? rangePosition === 'start' : undefined
         }, !readOnly && !fieldProps.disabled && {
           onClick: openRangeStartSelection
-        }, wrapperVariant === 'mobile' && {
+        }, variant === 'mobile' && {
           readOnly: true
         });
         if (anchorRef) {
@@ -114,7 +114,7 @@ const useMultiInputFieldSlotProps = ({
           focused: open ? rangePosition === 'end' : undefined
         }, !readOnly && !fieldProps.disabled && {
           onClick: openRangeEndSelection
-        }, wrapperVariant === 'mobile' && {
+        }, variant === 'mobile' && {
           readOnly: true
         });
         InputProps = resolvedComponentProps?.InputProps;
@@ -146,7 +146,7 @@ const useMultiInputFieldSlotProps = ({
   return enrichedFieldProps;
 };
 const useSingleInputFieldSlotProps = ({
-  wrapperVariant,
+  variant,
   open,
   actions,
   readOnly,
@@ -166,7 +166,7 @@ const useSingleInputFieldSlotProps = ({
 }) => {
   const handleFieldRef = useForkRef(fieldProps.unstableFieldRef, startFieldRef, endFieldRef);
   React.useEffect(() => {
-    if (!open || !startFieldRef.current) {
+    if (!open || !startFieldRef.current || variant === 'mobile') {
       return;
     }
     if (startFieldRef.current.isFieldFocused()) {
@@ -179,7 +179,7 @@ const useSingleInputFieldSlotProps = ({
       const newSelectedSection = rangePosition === 'start' ? sections.indexOf(currentView) : sections.lastIndexOf(currentView);
       startFieldRef.current?.focusField(newSelectedSection);
     }
-  }, [rangePosition, open, currentView, startFieldRef]);
+  }, [rangePosition, open, currentView, startFieldRef, variant]);
   const updateRangePosition = () => {
     if (!startFieldRef.current?.isFieldFocused()) {
       return;
@@ -208,8 +208,8 @@ const useSingleInputFieldSlotProps = ({
   });
   const slotProps = _extends({}, fieldProps.slotProps, {
     textField: pickerSlotProps?.textField,
-    clearButton: pickerSlots?.clearButton,
-    clearIcon: pickerSlots?.clearIcon
+    clearButton: pickerSlotProps?.clearButton,
+    clearIcon: pickerSlotProps?.clearIcon
   });
   const enrichedFieldProps = _extends({}, fieldProps, {
     slots,
@@ -225,7 +225,7 @@ const useSingleInputFieldSlotProps = ({
     focused: open ? true : undefined
   }, labelId != null && {
     id: labelId
-  }, wrapperVariant === 'mobile' && {
+  }, variant === 'mobile' && {
     readOnly: true
   }, !readOnly && !fieldProps.disabled && {
     onClick: openPicker

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

@@ -1,7 +1,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, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps<TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, ...pickerParams }: UseMobileRangePickerParams<TDate, TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
+export declare const useMobileRangePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, ...pickerParams }: UseMobileRangePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
     renderPicker: () => React.JSX.Element;
 };

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -5,8 +5,8 @@ import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { useLicenseVerifier } from '@mui/x-license';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
-import { usePicker, PickersModalDialog, PickersProvider } from '@mui/x-date-pickers/internals';
-import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { usePicker, PickersModalDialog, PickerProvider } from '@mui/x-date-pickers/internals';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import useId from '@mui/utils/useId';
 import { useEnrichedRangePickerFieldProps } from "../useEnrichedRangePickerFieldProps.js";
 import { getReleaseInfo } from "../../utils/releaseInfo.js";
@@ -46,19 +46,21 @@ export const useMobileRangePicker = _ref => {
     onRangePositionChange
   } = useRangePosition(props, fieldType === 'single-input' ? startFieldRef : undefined);
   const labelId = useId();
-  const contextTranslations = usePickersTranslations();
+  const contextTranslations = usePickerTranslations();
   const {
     open,
     actions,
     layoutProps,
+    providerProps,
     renderCurrentView,
     fieldProps: pickerFieldProps,
-    contextValue
+    ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
-    wrapperVariant: 'mobile',
+    variant: 'mobile',
     autoFocusView: true,
     fieldRef: rangePosition === 'start' ? startFieldRef : endFieldRef,
+    localeText,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange
@@ -68,26 +70,32 @@ export const useMobileRangePicker = _ref => {
   const fieldProps = useSlotProps({
     elementType: Field,
     externalSlotProps: innerSlotProps?.field,
-    additionalProps: _extends({}, pickerFieldProps, {
+    additionalProps: _extends({
+      // Internal props
       readOnly: readOnly ?? true,
       disabled,
-      className,
-      sx,
       format,
       formatDensity,
       enableAccessibleFieldDOMStructure,
       selectedSections,
       onSelectedSectionsChange,
       timezone
-    }, fieldType === 'single-input' ? {
-      inputRef,
+    }, pickerFieldProps, {
+      // onChange and value
+
+      // Forwarded props
+      className,
+      sx
+    }, fieldType === 'single-input' && !!inputRef && {
+      inputRef
+    }, fieldType === 'single-input' && {
       name
-    } : {}),
-    ownerState: props
+    }),
+    ownerState
   });
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const enrichedFieldProps = useEnrichedRangePickerFieldProps({
-    wrapperVariant: 'mobile',
+    variant: 'mobile',
     fieldType,
     open,
     actions,
@@ -137,9 +145,7 @@ export const useMobileRangePicker = _ref => {
       'aria-labelledby': labelledById
     }, innerSlotProps?.mobilePaper)
   });
-  const renderPicker = () => /*#__PURE__*/_jsxs(PickersProvider, {
-    contextValue: contextValue,
-    localeText: localeText,
+  const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
     children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, _extends({}, actions, {
       open: open,
       slots: slots,
@@ -150,7 +156,7 @@ export const useMobileRangePicker = _ref => {
         children: renderCurrentView()
       }))
     }))]
-  });
+  }));
   return {
     renderPicker
   };

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

@@ -1,25 +1,24 @@
 import { PickersModalDialogSlots, PickersModalDialogSlotProps, UsePickerViewsProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
-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 UseMobileRangePickerSlots<TView extends DateOrTimeViewWithMeridiem> extends UseRangePickerSlots<TView>, PickersModalDialogSlots {
 }
-export interface UseMobileRangePickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends UseRangePickerSlotProps<TDate, TView, TEnableAccessibleFieldDOMStructure>, PickersModalDialogSlotProps {
+export interface UseMobileRangePickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends UseRangePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>, PickersModalDialogSlotProps {
 }
 export interface MobileRangeOnlyPickerProps extends RangeOnlyPickerProps {
 }
-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> {
+export interface UseMobileRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, TView, any, any>> extends UseRangePickerProps<TView, TError, TExternalProps, MobileRangePickerAdditionalViewProps> {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots: UseMobileRangePickerSlots<TDate, TView>;
+    slots: UseMobileRangePickerSlots<TView>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: UseMobileRangePickerSlotProps<TDate, TView, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: UseMobileRangePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
 }
 export interface MobileRangePickerAdditionalViewProps extends RangePickerAdditionalViewProps {
 }
-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> {
+export interface UseMobileRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends UseRangePickerParams<TView, TExternalProps, MobileRangePickerAdditionalViewProps> {
 }

package/internals/hooks/useMultiInputFieldSelectedSections.d.ts

@@ -2,7 +2,7 @@ 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'> {
+interface UseMultiInputFieldSelectedSectionsParams extends Pick<UseFieldInternalProps<any, RangeFieldSection, any, any>, 'selectedSections' | 'onSelectedSectionsChange'> {
     unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
     unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
 }

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

@@ -1,4 +1,3 @@
-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, TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, unstableStartFieldRef, endTextFieldProps, unstableEndFieldRef, }: UseMultiInputDateRangeFieldParams<TDate, TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps>) => UseMultiInputRangeFieldResponse<TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps>;
+export declare const useMultiInputDateRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, unstableStartFieldRef, endTextFieldProps, unstableEndFieldRef, }: UseMultiInputDateRangeFieldParams<TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps>) => UseMultiInputRangeFieldResponse<TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps>;

package/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js

@@ -18,6 +18,7 @@ export const useMultiInputDateRangeField = ({
   const {
     value: valueProp,
     defaultValue,
+    referenceDate,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
@@ -39,6 +40,7 @@ export const useMultiInputDateRangeField = ({
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate,
     onChange,
     valueManager: rangeValueManager
   });

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

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

package/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js

@@ -18,6 +18,7 @@ export const useMultiInputDateTimeRangeField = ({
   const {
     value: valueProp,
     defaultValue,
+    referenceDate,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
@@ -39,6 +40,7 @@ export const useMultiInputDateTimeRangeField = ({
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate,
     onChange,
     valueManager: rangeValueManager
   });

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

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

package/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js

@@ -18,6 +18,7 @@ export const useMultiInputTimeRangeField = ({
   const {
     value: valueProp,
     defaultValue,
+    referenceDate,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
@@ -40,7 +41,8 @@ export const useMultiInputTimeRangeField = ({
     value: valueProp,
     defaultValue,
     onChange,
-    valueManager: rangeValueManager
+    valueManager: rangeValueManager,
+    referenceDate
   });
   const {
     validationError,

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

@@ -1,11 +1,10 @@
 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 extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any, TExternalProps>>({ props, ref, ...pickerParams }: UseStaticRangePickerParams<TDate, TView, TExternalProps>) => {
+export declare const useStaticRangePicker: <TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>>({ props, ref, ...pickerParams }: UseStaticRangePickerParams<TView, TExternalProps>) => {
     renderPicker: () => React.JSX.Element;
 };

package/internals/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -4,9 +4,8 @@ const _excluded = ["props", "ref"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
-import { usePicker, DIALOG_WIDTH } from '@mui/x-date-pickers/internals';
+import { usePicker, DIALOG_WIDTH, PickerProvider } from '@mui/x-date-pickers/internals';
 import { useRangePosition } from "../useRangePosition.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickerStaticLayout = styled(PickersLayout)(({
@@ -42,16 +41,18 @@ export const useStaticRangePicker = _ref => {
   } = useRangePosition(props);
   const {
     layoutProps,
+    providerProps,
     renderCurrentView
   } = usePicker(_extends({}, pickerParams, {
     props,
     autoFocusView: autoFocus ?? false,
     fieldRef: undefined,
+    localeText,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange
     },
-    wrapperVariant: displayStaticWrapperAs
+    variant: displayStaticWrapperAs
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const slotPropsForLayout = _extends({}, slotProps, {
@@ -60,8 +61,7 @@ export const useStaticRangePicker = _ref => {
       onRangePositionChange
     })
   });
-  const renderPicker = () => /*#__PURE__*/_jsx(LocalizationProvider, {
-    localeText: localeText,
+  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
     children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
       slots: slots,
       slotProps: slotPropsForLayout,
@@ -70,7 +70,7 @@ export const useStaticRangePicker = _ref => {
       ref: ref,
       children: renderCurrentView()
     }))
-  });
+  }));
   return {
     renderPicker
   };

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

@@ -1,29 +1,28 @@
 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 { BasePickerProps, UsePickerParams, ExportedBaseToolbarProps, StaticOnlyPickerProps, DateOrTimeViewWithMeridiem, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout';
-import { RangeFieldSection, DateRange } from '../../../models';
+import { RangeFieldSection } from '../../../models';
 import { UseRangePositionProps } from '../useRangePosition';
-export interface UseStaticRangePickerSlots<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<DateRange<TDate>, TDate, TView> {
+export interface UseStaticRangePickerSlots<TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<PickerRangeValue, TView> {
 }
-export interface UseStaticRangePickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<DateRange<TDate>, TDate, TView> {
+export interface UseStaticRangePickerSlotProps<TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<PickerRangeValue, TView> {
     toolbar?: ExportedBaseToolbarProps;
 }
 export interface StaticRangeOnlyPickerProps extends StaticOnlyPickerProps, UseRangePositionProps {
 }
-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 {
+export interface UseStaticRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>> extends BasePickerProps<PickerRangeValue, TView, TError, TExternalProps, {}>, StaticRangeOnlyPickerProps {
     /**
      * Overridable components.
      * @default {}
      */
-    slots?: UseStaticRangePickerSlots<TDate, TView>;
+    slots?: UseStaticRangePickerSlots<TView>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: UseStaticRangePickerSlotProps<TDate, TView>;
+    slotProps?: UseStaticRangePickerSlotProps<TView>;
 }
-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'> {
+export interface UseStaticRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParams<PickerRangeValue, TView, RangeFieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
     props: TExternalProps;
     /**
      * Ref to pass to the root element

package/internals/models/dateRange.d.ts

@@ -2,16 +2,15 @@ import { PickerValidDate } from '@mui/x-date-pickers/models';
 /**
  * Props used to validate a day value in range pickers.
  */
-export interface DayRangeValidationProps<TDate extends PickerValidDate> {
+export interface DayRangeValidationProps {
     /**
      * Disable specific date.
      *
      * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
      *
-     * @template TDate
-     * @param {TDate} day The date to test.
+     * @param {PickerValidDate} day The date to test.
      * @param {string} position The date to test, 'start' or 'end'.
      * @returns {boolean} Returns `true` if the date should be disabled.
      */
-    shouldDisableDate?: (day: TDate, position: 'start' | 'end') => boolean;
+    shouldDisableDate?: (day: PickerValidDate, position: 'start' | 'end') => boolean;
 }

package/internals/models/dateTimeRange.d.ts

@@ -1,13 +1,8 @@
-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, RangeFieldSeparatorProps } from '../../models';
-export interface UseDateTimeRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, RangeFieldSeparatorProps, DayRangeValidationProps<TDate>, TimeValidationProps<TDate>, BaseDateValidationProps<TDate>, DateTimeValidationProps<TDate> {
-    /**
-     * 12h/24h view for hour selection clock.
-     * @default utils.is12HourCycleInCurrentLocale()
-     */
-    ampm?: boolean;
+import { MakeOptional } from '@mui/x-internals/types';
+import { UseFieldInternalProps, DateOrTimeViewWithMeridiem, AmPmProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { DateTimeRangeValidationError, RangeFieldSection, RangeFieldSeparatorProps } from '../../models';
+import { ExportedValidateDateTimeRangeProps } from '../../validation/validateDateTimeRange';
+export interface UseDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, RangeFieldSeparatorProps, ExportedValidateDateTimeRangeProps, AmPmProps {
 }
 export type DateTimeRangePickerView = Exclude<DateOrTimeViewWithMeridiem, 'month' | 'year'>;
 export type DateTimeRangePickerViewExternal = Exclude<DateTimeRangePickerView, 'meridiem'>;

package/internals/models/fields.d.ts

@@ -0,0 +1,26 @@
+import { SxProps } from '@mui/material/styles';
+import { SlotComponentProps } from '@mui/utils';
+import { MakeRequired } from '@mui/x-internals/types';
+import { UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { FieldSection } from '@mui/x-date-pickers/models';
+import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
+import type { MultiInputFieldRefs, MultiInputFieldSlotRootProps, RangeFieldSeparatorProps, RangePosition } from '../../models';
+/**
+ * Props the multi input field can receive when used inside a picker.
+ * Only contains what the MUI components are passing to the field, not what users can pass using the `props.slotProps.field`.
+ */
+export interface BaseMultiInputFieldProps<TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends MakeRequired<Pick<UseFieldInternalProps<TValue, TSection, TEnableAccessibleFieldDOMStructure, TError>, 'readOnly' | 'disabled' | 'format' | 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange' | 'timezone' | 'autoFocus' | 'value' | 'onChange'>, 'format' | 'value' | 'onChange' | 'timezone'>, RangeFieldSeparatorProps, MultiInputFieldRefs {
+    className: string | undefined;
+    sx: SxProps<any> | undefined;
+    slots?: {
+        root?: React.ElementType;
+        separator?: React.ElementType;
+        textField?: React.ElementType;
+    };
+    slotProps?: {
+        root?: SlotComponentProps<React.ElementType<MultiInputFieldSlotRootProps>, {}, Record<string, any>>;
+        textField?: SlotComponentProps<typeof PickersTextField, {}, {
+            position?: RangePosition;
+        } & Record<string, any>>;
+    };
+}

package/internals/models/fields.js

@@ -0,0 +1 @@
+export {};

package/internals/models/timeRange.d.ts

@@ -1,10 +1,6 @@
-import { BaseTimeValidationProps, TimeValidationProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
-import { PickerValidDate } from '@mui/x-date-pickers/models';
-import { TimeRangeValidationError, RangeFieldSection, DateRange, RangeFieldSeparatorProps } from '../../models';
-export interface UseTimeRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, RangeFieldSeparatorProps, TimeValidationProps<TDate>, BaseTimeValidationProps {
-    /**
-     * 12h/24h view for hour selection clock.
-     * @default utils.is12HourCycleInCurrentLocale()
-     */
-    ampm?: boolean;
+import { MakeOptional } from '@mui/x-internals/types';
+import { UseFieldInternalProps, AmPmProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { TimeRangeValidationError, RangeFieldSection, RangeFieldSeparatorProps } from '../../models';
+import type { ExportedValidateTimeRangeProps } from '../../validation/validateTimeRange';
+export interface UseTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, RangeFieldSeparatorProps, ExportedValidateTimeRangeProps, AmPmProps {
 }

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

@@ -1,9 +1,10 @@
 import { MuiPickersAdapter, PickerValidDate } from '@mui/x-date-pickers/models';
-import { DateRange, RangePosition } from '../../models';
-interface CalculateRangeChangeOptions<TDate extends PickerValidDate> {
-    utils: MuiPickersAdapter<TDate>;
-    range: DateRange<TDate>;
-    newDate: TDate | null;
+import { PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { RangePosition } from '../../models';
+interface CalculateRangeChangeOptions {
+    utils: MuiPickersAdapter;
+    range: PickerRangeValue;
+    newDate: PickerValidDate | null;
     rangePosition: RangePosition;
     /**
      * Should allow flipping range `start` and `end` dates if the `newDate` would result in a new range creation.
@@ -12,12 +13,12 @@ interface CalculateRangeChangeOptions<TDate extends PickerValidDate> {
      */
     allowRangeFlip?: boolean;
     shouldMergeDateAndTime?: boolean;
-    referenceDate?: TDate | null;
+    referenceDate?: PickerValidDate;
 }
-interface CalculateRangeChangeResponse<TDate extends PickerValidDate> {
+interface CalculateRangeChangeResponse {
     nextSelection: RangePosition;
-    newRange: DateRange<TDate>;
+    newRange: PickerRangeValue;
 }
-export declare function calculateRangeChange<TDate extends PickerValidDate>({ utils, range, newDate: selectedDate, rangePosition, allowRangeFlip, shouldMergeDateAndTime, referenceDate, }: CalculateRangeChangeOptions<TDate>): CalculateRangeChangeResponse<TDate>;
-export declare function calculateRangePreview<TDate extends PickerValidDate>(options: CalculateRangeChangeOptions<TDate>): DateRange<TDate>;
+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-utils.d.ts

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

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczMjE0MzYwMDAwMA==";
+  const releaseInfo = "MTczMjIzMDAwMDAwMA==";
   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,8 +1,7 @@
-import { PickerValueManager, FieldValueManager } from '@mui/x-date-pickers/internals';
-import { PickerValidDate } from '@mui/x-date-pickers/models';
-import type { DateRangeValidationError, DateTimeRangeValidationError, TimeRangeValidationError, RangeFieldSection, DateRange } from '../../models';
-export type RangePickerValueManager<TValue = [any, any], TDate extends PickerValidDate = any, TError extends DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError = any> = PickerValueManager<TValue, TDate, TError>;
+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>;
 export declare const rangeValueManager: RangePickerValueManager;
-export declare const getRangeFieldValueManager: <TDate extends PickerValidDate>({ dateSeparator, }: {
+export declare const getRangeFieldValueManager: ({ dateSeparator, }: {
     dateSeparator: string | undefined;
-}) => FieldValueManager<DateRange<TDate>, TDate, RangeFieldSection>;
+}) => FieldValueManager<PickerRangeValue, RangeFieldSection>;

package/models/dateRange.d.ts

@@ -1,8 +1,7 @@
-import { BaseDateValidationProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
-import { PickerValidDate } from '@mui/x-date-pickers/models';
+import { MakeOptional } from '@mui/x-internals/types';
+import { UseFieldInternalProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { RangeFieldSection, RangeFieldSeparatorProps } from './fields';
 import { DateRangeValidationError } from './validation';
-import { DateRange } from './range';
-import { DayRangeValidationProps } from '../internals/models/dateRange';
-export interface UseDateRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, 'unstableFieldRef'>, 'format'>, RangeFieldSeparatorProps, DayRangeValidationProps<TDate>, BaseDateValidationProps<TDate> {
+import type { ExportedValidateDateRangeProps } from '../validation/validateDateRange';
+export interface UseDateRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, 'unstableFieldRef'>, 'format'>, RangeFieldSeparatorProps, ExportedValidateDateRangeProps {
 }