@mui/x-date-pickers-pro 8.0.0-alpha.7 → 8.0.0-alpha.8

package/internals/hooks/{useEnrichedRangePickerFieldProps.js → useEnrichedRangePickerField.js}

@@ -8,15 +8,14 @@ import useForkRef from '@mui/utils/useForkRef';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { onSpaceOrEnter } from '@mui/x-date-pickers/internals';
 const useMultiInputFieldSlotProps = ({
+  contextValue,
   variant,
-  open,
-  setOpen,
   readOnly,
   labelId,
   disableOpenPicker,
   onBlur,
   rangePosition,
-  onRangePositionChange,
+  setRangePosition,
   localeText: inLocaleText,
   pickerSlotProps,
   pickerSlots,
@@ -24,7 +23,6 @@ const useMultiInputFieldSlotProps = ({
   anchorRef,
   currentView,
   initialView,
-  setView,
   startFieldRef,
   endFieldRef
 }) => {
@@ -33,7 +31,7 @@ const useMultiInputFieldSlotProps = ({
   const handleEndFieldRef = useForkRef(fieldProps.unstableEndFieldRef, endFieldRef);
   const previousRangePosition = React.useRef(rangePosition);
   React.useEffect(() => {
-    if (!open || variant === 'mobile') {
+    if (!contextValue.open || variant === 'mobile') {
       return;
     }
     const currentFieldRef = rangePosition === 'start' ? startFieldRef : endFieldRef;
@@ -49,36 +47,36 @@ 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, variant]);
+  }, [rangePosition, contextValue.open, currentView, startFieldRef, endFieldRef, variant]);
   const openRangeStartSelection = event => {
     event.stopPropagation();
-    onRangePositionChange('start');
+    setRangePosition('start');
     if (!readOnly && !disableOpenPicker) {
       event.preventDefault();
-      setOpen(true);
+      contextValue.setOpen(true);
     }
   };
   const openRangeEndSelection = event => {
     event.stopPropagation();
-    onRangePositionChange('end');
+    setRangePosition('end');
     if (!readOnly && !disableOpenPicker) {
       event.preventDefault();
-      setOpen(true);
+      contextValue.setOpen(true);
     }
   };
   const handleFocusStart = () => {
-    if (open) {
-      onRangePositionChange('start');
+    if (contextValue.open) {
+      setRangePosition('start');
       if (previousRangePosition.current !== 'start' && initialView) {
-        setView?.(initialView);
+        contextValue.setView?.(initialView);
       }
     }
   };
   const handleFocusEnd = () => {
-    if (open) {
-      onRangePositionChange('end');
+    if (contextValue.open) {
+      setRangePosition('end');
       if (previousRangePosition.current !== 'end' && initialView) {
-        setView?.(initialView);
+        contextValue.setView?.(initialView);
       }
     }
   };
@@ -97,8 +95,8 @@ const useMultiInputFieldSlotProps = ({
           label: inLocaleText?.start ?? translations.start,
           onKeyDown: onSpaceOrEnter(openRangeStartSelection),
           onFocus: handleFocusStart,
-          focused: open ? rangePosition === 'start' : undefined
-        }, !readOnly && !fieldProps.disabled && {
+          focused: contextValue.open ? rangePosition === 'start' : undefined
+        }, !readOnly && !contextValue.disabled && {
           onClick: openRangeStartSelection
         }, variant === 'mobile' && {
           readOnly: true
@@ -113,8 +111,8 @@ const useMultiInputFieldSlotProps = ({
           label: inLocaleText?.end ?? translations.end,
           onKeyDown: onSpaceOrEnter(openRangeEndSelection),
           onFocus: handleFocusEnd,
-          focused: open ? rangePosition === 'end' : undefined
-        }, !readOnly && !fieldProps.disabled && {
+          focused: contextValue.open ? rangePosition === 'end' : undefined
+        }, !readOnly && !contextValue.disabled && {
           onClick: openRangeEndSelection
         }, variant === 'mobile' && {
           readOnly: true
@@ -145,29 +143,29 @@ const useMultiInputFieldSlotProps = ({
     slots,
     slotProps
   });
-  return enrichedFieldProps;
+  return {
+    fieldProps: enrichedFieldProps,
+    fieldPrivateContextValue: {}
+  };
 };
 const useSingleInputFieldSlotProps = ({
+  contextValue,
+  fieldPrivateContextValue,
   variant,
-  open,
-  setOpen,
   readOnly,
   labelId,
   disableOpenPicker,
   label,
   onBlur,
   rangePosition,
-  onRangePositionChange,
+  setRangePosition,
   singleInputFieldRef,
-  pickerSlots,
-  pickerSlotProps,
   fieldProps,
-  anchorRef,
   currentView
 }) => {
   const handleFieldRef = useForkRef(fieldProps.unstableFieldRef, singleInputFieldRef);
   React.useEffect(() => {
-    if (!open || !singleInputFieldRef.current || variant === 'mobile') {
+    if (!contextValue.open || !singleInputFieldRef.current || variant === 'mobile') {
       return;
     }
     if (singleInputFieldRef.current.isFieldFocused()) {
@@ -180,7 +178,7 @@ const useSingleInputFieldSlotProps = ({
       const newSelectedSection = rangePosition === 'start' ? sections.indexOf(currentView) : sections.lastIndexOf(currentView);
       singleInputFieldRef.current?.focusField(newSelectedSection);
     }
-  }, [rangePosition, open, currentView, singleInputFieldRef, variant]);
+  }, [rangePosition, contextValue.open, currentView, singleInputFieldRef, variant]);
   const updateRangePosition = () => {
     if (!singleInputFieldRef.current?.isFieldFocused()) {
       return;
@@ -189,52 +187,41 @@ const useSingleInputFieldSlotProps = ({
     const activeSectionIndex = singleInputFieldRef.current?.getActiveSectionIndex();
     const domRangePosition = activeSectionIndex == null || activeSectionIndex < sections.length / 2 ? 'start' : 'end';
     if (domRangePosition != null && domRangePosition !== rangePosition) {
-      onRangePositionChange(domRangePosition);
+      setRangePosition(domRangePosition);
     }
   };
   const handleSelectedSectionsChange = useEventCallback(selectedSection => {
     setTimeout(updateRangePosition);
-    fieldProps.onSelectedSectionsChange?.(selectedSection);
+    fieldPrivateContextValue.onSelectedSectionsChange?.(selectedSection);
   });
   const openPicker = event => {
     event.stopPropagation();
     if (!readOnly && !disableOpenPicker) {
       event.preventDefault();
-      setOpen(true);
+      contextValue.setOpen(true);
     }
   };
-  const slots = _extends({}, fieldProps.slots, {
-    textField: pickerSlots?.textField,
-    clearButton: pickerSlots?.clearButton,
-    clearIcon: pickerSlots?.clearIcon
-  });
-  const slotProps = _extends({}, fieldProps.slotProps, {
-    textField: pickerSlotProps?.textField,
-    clearButton: pickerSlotProps?.clearButton,
-    clearIcon: pickerSlotProps?.clearIcon
-  });
   const enrichedFieldProps = _extends({}, fieldProps, {
-    slots,
-    slotProps,
     label,
     unstableFieldRef: handleFieldRef,
     onKeyDown: onSpaceOrEnter(openPicker, fieldProps.onKeyDown),
-    onSelectedSectionsChange: handleSelectedSectionsChange,
     onBlur,
-    InputProps: _extends({
-      ref: anchorRef
-    }, fieldProps?.InputProps),
-    focused: open ? true : undefined
+    focused: contextValue.open ? true : undefined
   }, labelId != null && {
     id: labelId
   }, variant === 'mobile' && {
     readOnly: true
-  }, !readOnly && !fieldProps.disabled && {
+  }, !readOnly && !contextValue.disabled && {
     onClick: openPicker
   });
-  return enrichedFieldProps;
+  return {
+    fieldProps: enrichedFieldProps,
+    fieldPrivateContextValue: {
+      onSelectedSectionsChange: handleSelectedSectionsChange
+    }
+  };
 };
-export const useEnrichedRangePickerFieldProps = params => {
+export const useEnrichedRangePickerField = params => {
   /* eslint-disable react-hooks/rules-of-hooks */
   if (process.env.NODE_ENV !== 'production') {
     const fieldTypeRef = React.useRef(params.fieldType);

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -5,10 +5,10 @@ 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, PickerProvider } from '@mui/x-date-pickers/internals';
+import { usePicker, PickersModalDialog, PickerProvider, PickerFieldUIContextProvider } 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 { useEnrichedRangePickerField } from "../useEnrichedRangePickerField.js";
 import { getReleaseInfo } from "../../utils/releaseInfo.js";
 import { useRangePosition } from "../useRangePosition.js";
 import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
@@ -25,17 +25,10 @@ export const useMobileRangePicker = _ref => {
     slotProps: innerSlotProps,
     className,
     sx,
-    format,
-    formatDensity,
-    enableAccessibleFieldDOMStructure,
-    selectedSections,
-    onSelectedSectionsChange,
-    timezone,
     label,
     inputRef,
     name,
     readOnly,
-    disabled,
     disableOpenPicker,
     localeText
   } = props;
@@ -57,7 +50,6 @@ export const useMobileRangePicker = _ref => {
   const {
     providerProps,
     renderCurrentView,
-    fieldProps: pickerFieldProps,
     ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
@@ -66,6 +58,9 @@ export const useMobileRangePicker = _ref => {
     fieldRef,
     localeText
   }));
+
+  // Temporary hack to hide the opening button on the range pickers until we have migrate them to the new opening logic.
+  providerProps.contextValue.triggerStatus = 'hidden';
   const Field = slots.field;
   const fieldProps = useSlotProps({
     elementType: Field,
@@ -73,16 +68,6 @@ export const useMobileRangePicker = _ref => {
     additionalProps: _extends({
       // Internal props
       readOnly: readOnly ?? true,
-      disabled,
-      format,
-      formatDensity,
-      enableAccessibleFieldDOMStructure,
-      selectedSections,
-      onSelectedSectionsChange,
-      timezone
-    }, pickerFieldProps, {
-      // onChange and value
-
       // Forwarded props
       className,
       sx
@@ -94,12 +79,12 @@ export const useMobileRangePicker = _ref => {
     ownerState
   });
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
-  const enrichedFieldProps = useEnrichedRangePickerFieldProps(_extends({
+  const enrichedFieldResponse = useEnrichedRangePickerField(_extends({
     variant: 'mobile',
     fieldType,
     // These direct access to `providerProps` will go away once the range fields handle the picker opening
-    open: providerProps.contextValue.open,
-    setOpen: providerProps.contextValue.setOpen,
+    contextValue: providerProps.contextValue,
+    fieldPrivateContextValue: providerProps.fieldPrivateContextValue,
     readOnly,
     labelId,
     disableOpenPicker,
@@ -138,17 +123,23 @@ export const useMobileRangePicker = _ref => {
     }, innerSlotProps?.mobilePaper)
   });
   const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-    children: /*#__PURE__*/_jsxs(PickerRangePositionContext.Provider, {
-      value: rangePositionResponse,
-      children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
-        slots: slots,
-        slotProps: slotProps,
-        children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+    // This override will go away once the range fields handle the picker opening
+    fieldPrivateContextValue: _extends({}, providerProps.fieldPrivateContextValue, enrichedFieldResponse.fieldPrivateContextValue),
+    children: /*#__PURE__*/_jsx(PickerFieldUIContextProvider, {
+      slots: slots,
+      slotProps: slotProps,
+      children: /*#__PURE__*/_jsxs(PickerRangePositionContext.Provider, {
+        value: rangePositionResponse,
+        children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldResponse.fieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
           slots: slots,
           slotProps: slotProps,
-          children: renderCurrentView()
-        }))
-      })]
+          children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+            slots: slots,
+            slotProps: slotProps,
+            children: renderCurrentView()
+          }))
+        })]
+      })
     })
   }));
   return {

package/internals/hooks/useRangePosition.d.ts

@@ -22,6 +22,6 @@ export interface UseRangePositionProps {
 }
 export interface UseRangePositionResponse {
     rangePosition: RangePosition;
-    onRangePositionChange: (newPosition: RangePosition) => void;
+    setRangePosition: (newPosition: RangePosition) => void;
 }
 export declare const useRangePosition: (props: UseRangePositionProps, singleInputFieldRef?: React.RefObject<FieldRef<PickerRangeValue> | null>) => UseRangePositionResponse;

package/internals/hooks/useRangePosition.js

@@ -25,6 +25,6 @@ export const useRangePosition = (props, singleInputFieldRef) => {
   });
   return {
     rangePosition,
-    onRangePositionChange: handleRangePositionChange
+    setRangePosition: handleRangePositionChange
   };
 };

package/internals/models/dateTimeRange.d.ts

@@ -1,8 +1,3 @@
-import { MakeOptional } from '@mui/x-internals/types';
-import { UseFieldInternalProps, DateOrTimeViewWithMeridiem, AmPmProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
-import { DateTimeRangeValidationError, RangeFieldSeparatorProps } from '../../models';
-import { ExportedValidateDateTimeRangeProps } from '../../validation/validateDateTimeRange';
-export interface UseDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, RangeFieldSeparatorProps, ExportedValidateDateTimeRangeProps, AmPmProps {
-}
+import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
 export type DateTimeRangePickerView = Exclude<DateOrTimeViewWithMeridiem, 'month' | 'year'>;
 export type DateTimeRangePickerViewExternal = Exclude<DateTimeRangePickerView, 'meridiem'>;

package/internals/models/fields.d.ts

@@ -1,6 +1,5 @@
 import { SxProps } from '@mui/material/styles';
 import { SlotComponentProps } from '@mui/utils';
-import { MakeRequired } from '@mui/x-internals/types';
 import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
 import { FieldOwnerState } from '@mui/x-date-pickers/models';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
@@ -9,7 +8,7 @@ import type { MultiInputFieldRefs, MultiInputFieldSlotRootProps, RangeFieldSepar
  * 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<TEnableAccessibleFieldDOMStructure extends boolean, TError> extends MakeRequired<Pick<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TError>, 'readOnly' | 'disabled' | 'format' | 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange' | 'timezone' | 'autoFocus' | 'value' | 'onChange'>, 'format' | 'value' | 'onChange' | 'timezone'>, RangeFieldSeparatorProps, MultiInputFieldRefs {
+export interface BaseMultiInputFieldProps<TEnableAccessibleFieldDOMStructure extends boolean, TError> extends Pick<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TError>, 'readOnly' | 'autoFocus'>, RangeFieldSeparatorProps, MultiInputFieldRefs {
     className: string | undefined;
     sx: SxProps<any> | undefined;
     slots?: {

package/internals/models/index.d.ts

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

package/internals/models/index.js

@@ -1,4 +1,3 @@
 export * from "./dateRange.js";
 export * from "./dateTimeRange.js";
-export * from "./timeRange.js";
 export * from "./rangePickerProps.js";

package/internals/models/managers.d.ts

@@ -0,0 +1,3 @@
+import { PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { PickerManager } from '@mui/x-date-pickers/models';
+export type PickerAnyRangeManager = PickerManager<PickerRangeValue, any, any, any, any>;

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

@@ -0,0 +1,3 @@
+import { CreateMultiInputRangeFieldParameters, CreateMultiInputRangeFieldReturnValue } from './createMultiInputRangeField.types';
+import { PickerAnyRangeManager } from '../../models/managers';
+export declare function createMultiInputRangeField<TManager extends PickerAnyRangeManager>({ useManager, name, getUtilityClass, }: CreateMultiInputRangeFieldParameters<TManager>): CreateMultiInputRangeFieldReturnValue<TManager>;

package/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js

@@ -0,0 +1,133 @@
+'use client';
+
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["slots", "slotProps", "className", "classes"];
+import * as React from 'react';
+import clsx from 'clsx';
+import Stack from '@mui/material/Stack';
+import MuiTextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import { styled, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import useSlotProps from '@mui/utils/useSlotProps';
+import { cleanFieldResponse, useFieldOwnerState } from '@mui/x-date-pickers/internals';
+import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
+import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
+import { useMultiInputRangeField } from "../../../hooks/useMultiInputRangeField/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function createMultiInputRangeField({
+  useManager,
+  name,
+  getUtilityClass
+}) {
+  const useUtilityClasses = classes => {
+    const slots = {
+      root: ['root'],
+      separator: ['separator']
+    };
+    return composeClasses(slots, getUtilityClass, classes);
+  };
+  const MultiInputRangeFieldRoot = styled(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Stack, _extends({
+    ref: ref,
+    spacing: 2,
+    direction: "row",
+    alignItems: "center"
+  }, props))), {
+    name,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+  })({});
+  const MultiInputRangeFieldSeparator = styled(Typography, {
+    name,
+    slot: 'Separator',
+    overridesResolver: (props, styles) => styles.separator
+  })({
+    lineHeight: '1.4375em' // 23px
+  });
+  const MultiInputRangeField = /*#__PURE__*/React.forwardRef(function MultiInputRangeField(props, ref) {
+    const themeProps = useThemeProps({
+      props,
+      // eslint-disable-next-line material-ui/mui-name-matches-component-name
+      name
+    });
+    const manager = useManager({
+      enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure,
+      dateSeparator: props.dateSeparator
+    });
+    const {
+      internalProps,
+      forwardedProps
+    } = useSplitFieldProps(themeProps, manager.valueType);
+    const {
+        slots,
+        slotProps,
+        className,
+        classes: classesProp
+      } = forwardedProps,
+      otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
+    const classes = useUtilityClasses(classesProp);
+    const ownerState = useFieldOwnerState(internalProps);
+    const Root = slots?.root ?? MultiInputRangeFieldRoot;
+    const rootProps = useSlotProps({
+      elementType: Root,
+      externalSlotProps: slotProps?.root,
+      externalForwardedProps: otherForwardedProps,
+      additionalProps: {
+        ref
+      },
+      ownerState,
+      className: clsx(className, classes.root)
+    });
+    const startTextFieldProps = useSlotProps({
+      elementType: PickersTextField,
+      externalSlotProps: slotProps?.textField,
+      ownerState: _extends({}, ownerState, {
+        position: 'start'
+      })
+    });
+    const endTextFieldProps = useSlotProps({
+      elementType: PickersTextField,
+      externalSlotProps: slotProps?.textField,
+      ownerState: _extends({}, ownerState, {
+        position: 'end'
+      })
+    });
+    const {
+      startDate,
+      endDate,
+      enableAccessibleFieldDOMStructure
+    } = useMultiInputRangeField({
+      manager,
+      internalProps,
+      startForwardedProps: startTextFieldProps,
+      endForwardedProps: endTextFieldProps
+    });
+    const Separator = slots?.separator ?? MultiInputRangeFieldSeparator;
+    const separatorProps = useSlotProps({
+      elementType: Separator,
+      externalSlotProps: slotProps?.separator,
+      additionalProps: {
+        children: internalProps.dateSeparator ?? '–'
+      },
+      ownerState,
+      className: classes.separator
+    });
+    const {
+      textFieldProps: startDateProps
+    } = cleanFieldResponse(startDate);
+    const {
+      textFieldProps: endDateProps
+    } = cleanFieldResponse(endDate);
+    const TextField = slots?.textField ?? (enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
+    return /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
+      children: [/*#__PURE__*/_jsx(TextField, _extends({
+        fullWidth: true
+      }, startDateProps)), /*#__PURE__*/_jsx(Separator, _extends({}, separatorProps)), /*#__PURE__*/_jsx(TextField, _extends({
+        fullWidth: true
+      }, endDateProps))]
+    }));
+  });
+  MultiInputRangeField.fieldType = 'multi-input';
+  return MultiInputRangeField;
+}

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/releaseInfo.js

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

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

package/managers/useDateRangeManager.d.ts

@@ -8,7 +8,7 @@ export interface UseDateRangeManagerParameters<TEnableAccessibleFieldDOMStructur
     enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
 }
 export type UseDateRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError, DateRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>, DateRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure>>;
-interface DateRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, 'format'>, RangeFieldSeparatorProps, ExportedValidateDateRangeProps {
+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 {
 }

package/managers/useDateRangeManager.js

@@ -26,6 +26,8 @@ export function useDateRangeManager(parameters = {}) {
       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]);
 }