@mui/x-date-pickers-pro 8.0.0-alpha.12 → 8.0.0-alpha.13

package/esm/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -6,11 +6,11 @@ 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 { executeInTheNextEventLoopTick, getActiveElement, usePicker, PickerPopper, PickerProvider, PickerFieldUIContextProvider } from '@mui/x-date-pickers/internals';
-import { useEnrichedRangePickerField } from "../useEnrichedRangePickerField.js";
+import { usePicker, PickerPopper, PickerProvider, PickerFieldUIContextProvider } from '@mui/x-date-pickers/internals';
 import { getReleaseInfo } from "../../utils/releaseInfo.js";
 import { useRangePosition } from "../useRangePosition.js";
 import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
+import { getRangeFieldType } from "../../utils/date-fields-utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
 export const useDesktopRangePicker = _ref => {
@@ -23,27 +23,11 @@ export const useDesktopRangePicker = _ref => {
     slots,
     slotProps,
     inputRef,
-    readOnly,
-    autoFocus,
-    disableOpenPicker,
     localeText
   } = props;
-  const fieldContainerRef = React.useRef(null);
-  const popperRef = React.useRef(null);
-  const startFieldRef = React.useRef(null);
-  const endFieldRef = React.useRef(null);
-  const singleInputFieldRef = React.useRef(null);
-  const initialView = React.useRef(props.openTo ?? null);
-  const fieldType = slots.field.fieldType ?? 'multi-input';
-  const rangePositionResponse = useRangePosition(props, fieldType === 'single-input' ? singleInputFieldRef : undefined);
-  let fieldRef;
-  if (fieldType === 'single-input') {
-    fieldRef = singleInputFieldRef;
-  } else if (rangePositionResponse.rangePosition === 'start') {
-    fieldRef = startFieldRef;
-  } else {
-    fieldRef = endFieldRef;
-  }
+  const fieldType = getRangeFieldType(slots.field);
+  const viewContainerRole = fieldType === 'single-input' ? 'dialog' : 'tooltip';
+  const rangePositionResponse = useRangePosition(props);
   const {
     providerProps,
     renderCurrentView,
@@ -51,77 +35,26 @@ export const useDesktopRangePicker = _ref => {
   } = usePicker(_extends({}, pickerParams, {
     props,
     variant: 'desktop',
-    autoFocusView: false,
-    fieldRef,
+    autoFocusView: viewContainerRole === 'dialog',
+    viewContainerRole,
     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';
-  React.useEffect(() => {
-    if (providerProps.contextValue.view) {
-      initialView.current = providerProps.contextValue.view;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const handleBlur = () => {
-    executeInTheNextEventLoopTick(() => {
-      if (fieldContainerRef.current?.contains(getActiveElement(document)) || popperRef.current?.contains(getActiveElement(document))) {
-        return;
-      }
-
-      // This direct access to `providerProps` will go away once the range fields stop having their views in a tooltip.
-      providerProps.privateContextValue.dismissViews();
-    });
-  };
   const Field = slots.field;
   const _useSlotProps = useSlotProps({
       elementType: Field,
       externalSlotProps: slotProps?.field,
-      additionalProps: {
-        // Internal props
-        readOnly,
-        autoFocus: autoFocus && !props.open,
-        // Forwarded props
-        ref: fieldContainerRef
-      },
       ownerState
     }),
     fieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
-  const enrichedFieldResponse = useEnrichedRangePickerField(_extends({
-    variant: 'desktop',
-    fieldType,
-    // These direct access to `providerProps` will go away once the range fields handle the picker opening
-    contextValue: providerProps.contextValue,
-    fieldPrivateContextValue: providerProps.fieldPrivateContextValue,
-    readOnly,
-    disableOpenPicker,
-    localeText,
-    onBlur: handleBlur,
-    pickerSlotProps: slotProps,
-    pickerSlots: slots,
-    fieldProps,
-    anchorRef: providerProps.contextValue.triggerRef,
-    startFieldRef,
-    endFieldRef,
-    singleInputFieldRef,
-    currentView: providerProps.contextValue.view !== props.openTo ? providerProps.contextValue.view : undefined,
-    initialView: initialView.current ?? undefined
-  }, rangePositionResponse));
   const Layout = slots?.layout ?? PickersLayout;
   const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-    // 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,
       inputRef: inputRef,
       children: /*#__PURE__*/_jsxs(PickerRangePositionContext.Provider, {
         value: rangePositionResponse,
-        children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldResponse.fieldProps)), /*#__PURE__*/_jsx(PickerPopper, {
-          role: "tooltip",
-          containerRef: popperRef,
-          onBlur: handleBlur,
+        children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps)), /*#__PURE__*/_jsx(PickerPopper, {
           slots: slots,
           slotProps: slotProps,
           children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {

package/esm/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.d.ts

@@ -1,7 +1,19 @@
-import { PickerPopperSlots, PickerPopperSlotProps, UsePickerViewsProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
-import { RangeOnlyPickerProps, UseRangePickerParams, UseRangePickerProps, UseRangePickerSlotProps, UseRangePickerSlots } from "../models/useRangePicker.js";
-export interface UseDesktopRangePickerSlots extends UseRangePickerSlots, PickerPopperSlots {}
-export interface UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, PickerPopperSlotProps {}
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickerFieldSlotProps, PickerOwnerState } from '@mui/x-date-pickers/models';
+import { PickerPopperSlots, PickerPopperSlotProps, UsePickerViewsProps, DateOrTimeViewWithMeridiem, PickerRangeValue, PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from '@mui/x-date-pickers/internals';
+import { ExportedPickersLayoutSlotProps, ExportedPickersLayoutSlots } from '@mui/x-date-pickers/PickersLayout';
+import { RangeOnlyPickerProps, UseRangePickerParams, UseRangePickerProps } from "../models/useRangePicker.js";
+export interface UseDesktopRangePickerSlots extends PickerPopperSlots, ExportedPickersLayoutSlots<PickerRangeValue>, PickerFieldUISlotsFromContext {
+  /**
+   * Component used to enter the date with the keyboard.
+   */
+  field: React.ElementType;
+}
+export interface UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickerPopperSlotProps, ExportedPickersLayoutSlotProps<PickerRangeValue>, PickerFieldUISlotPropsFromContext {
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure> & {
+    dateSeparator?: string;
+  }, {}, PickerOwnerState>;
+}
 export interface DesktopRangeOnlyPickerProps extends RangeOnlyPickerProps {
   /**
    * If `true`, the start `input` element is focused during the first mount.

package/esm/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -4,15 +4,15 @@ const _excluded = ["props"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
+import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { useLicenseVerifier } from '@mui/x-license';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
 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 { useEnrichedRangePickerField } from "../useEnrichedRangePickerField.js";
 import { getReleaseInfo } from "../../utils/releaseInfo.js";
 import { useRangePosition } from "../useRangePosition.js";
 import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
+import { getRangeFieldType } from "../../utils/date-fields-utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
 export const useMobileRangePicker = _ref => {
@@ -26,25 +26,11 @@ export const useMobileRangePicker = _ref => {
     slotProps: innerSlotProps,
     label,
     inputRef,
-    readOnly,
-    disableOpenPicker,
     localeText
   } = props;
-  const startFieldRef = React.useRef(null);
-  const endFieldRef = React.useRef(null);
-  const singleInputFieldRef = React.useRef(null);
-  const fieldType = slots.field.fieldType ?? 'multi-input';
-  const rangePositionResponse = useRangePosition(props, fieldType === 'single-input' ? singleInputFieldRef : undefined);
-  const labelId = useId();
+  const fieldType = getRangeFieldType(slots.field);
+  const rangePositionResponse = useRangePosition(props);
   const contextTranslations = usePickerTranslations();
-  let fieldRef;
-  if (fieldType === 'single-input') {
-    fieldRef = singleInputFieldRef;
-  } else if (rangePositionResponse.rangePosition === 'start') {
-    fieldRef = startFieldRef;
-  } else {
-    fieldRef = endFieldRef;
-  }
   const {
     providerProps,
     renderCurrentView,
@@ -53,41 +39,21 @@ export const useMobileRangePicker = _ref => {
     props,
     variant: 'mobile',
     autoFocusView: true,
-    fieldRef,
+    viewContainerRole: 'dialog',
     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 labelId = providerProps.privateContextValue.labelId;
+  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const Field = slots.field;
   const _useSlotProps = useSlotProps({
       elementType: Field,
       externalSlotProps: innerSlotProps?.field,
-      additionalProps: {
-        // Internal props
-        readOnly: readOnly ?? true
-      },
+      additionalProps: _extends({}, fieldType === 'single-input' && isToolbarHidden && {
+        id: labelId
+      }),
       ownerState
     }),
     fieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
-  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
-  const enrichedFieldResponse = useEnrichedRangePickerField(_extends({
-    variant: 'mobile',
-    fieldType,
-    // These direct access to `providerProps` will go away once the range fields handle the picker opening
-    contextValue: providerProps.contextValue,
-    fieldPrivateContextValue: providerProps.fieldPrivateContextValue,
-    readOnly,
-    labelId,
-    disableOpenPicker,
-    localeText,
-    pickerSlots: slots,
-    pickerSlotProps: innerSlotProps,
-    fieldProps,
-    startFieldRef,
-    endFieldRef,
-    singleInputFieldRef
-  }, rangePositionResponse));
   const Layout = slots?.layout ?? PickersLayout;
   const finalLocaleText = _extends({}, contextTranslations, localeText);
   let labelledById = pickerParams.valueType === 'date-time' ? `${labelId}-start-toolbar ${labelId}-end-toolbar` : labelId;
@@ -112,17 +78,21 @@ export const useMobileRangePicker = _ref => {
     mobilePaper: _extends({
       'aria-labelledby': labelledById
     }, innerSlotProps?.mobilePaper)
+  }, fieldType === 'multi-input' && {
+    textField: slotOwnerState => {
+      return _extends({}, resolveComponentProps(innerSlotProps?.textField, slotOwnerState), {
+        id: `${labelId}-${slotOwnerState.position}`
+      });
+    }
   });
   const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-    // 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,
       inputRef: inputRef,
       children: /*#__PURE__*/_jsxs(PickerRangePositionContext.Provider, {
         value: rangePositionResponse,
-        children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldResponse.fieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
+        children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
           slots: slots,
           slotProps: slotProps,
           children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {

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

@@ -1,7 +1,20 @@
-import { PickersModalDialogSlots, PickersModalDialogSlotProps, UsePickerViewsProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
-import { RangeOnlyPickerProps, UseRangePickerParams, UseRangePickerProps, UseRangePickerSlotProps, UseRangePickerSlots } from "../models/useRangePicker.js";
-export interface UseMobileRangePickerSlots extends UseRangePickerSlots, PickersModalDialogSlots {}
-export interface UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, PickersModalDialogSlotProps {}
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickerFieldSlotProps, PickerOwnerState } from '@mui/x-date-pickers/models';
+import { PickersModalDialogSlots, PickersModalDialogSlotProps, UsePickerViewsProps, DateOrTimeViewWithMeridiem, PickerRangeValue, PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from '@mui/x-date-pickers/internals';
+import { ExportedPickersLayoutSlotProps, ExportedPickersLayoutSlots, PickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout';
+import { RangeOnlyPickerProps, UseRangePickerParams, UseRangePickerProps } from "../models/useRangePicker.js";
+export interface UseMobileRangePickerSlots extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerRangeValue>, PickerFieldUISlotsFromContext {
+  /**
+   * Component used to enter the date with the keyboard.
+   */
+  field: React.ElementType;
+}
+export interface ExportedUseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerRangeValue>, PickerFieldUISlotPropsFromContext {
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure> & {
+    dateSeparator?: string;
+  }, {}, PickerOwnerState>;
+}
+export interface UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerRangeValue>, 'toolbar'> {}
 export interface MobileRangeOnlyPickerProps extends RangeOnlyPickerProps {}
 export interface UseMobileRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, TView, any>> extends UseRangePickerProps<TView, TError, TExternalProps> {
   /**

package/esm/internals/hooks/useRangePosition.d.ts

@@ -1,6 +1,3 @@
-import * as React from 'react';
-import { FieldRef } from '@mui/x-date-pickers/models';
-import { PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { RangePosition } from "../../models/index.js";
 export interface UseRangePositionProps {
   /**
@@ -24,4 +21,4 @@ export interface UseRangePositionResponse {
   rangePosition: RangePosition;
   setRangePosition: (newPosition: RangePosition) => void;
 }
-export declare const useRangePosition: (props: UseRangePositionProps, singleInputFieldRef?: React.RefObject<FieldRef<PickerRangeValue> | null>) => UseRangePositionResponse;
+export declare const useRangePosition: (props: UseRangePositionProps) => UseRangePositionResponse;

package/esm/internals/hooks/useRangePosition.js

@@ -1,32 +1,15 @@
 import useControlled from '@mui/utils/useControlled';
 import useEventCallback from '@mui/utils/useEventCallback';
-export const useRangePosition = (props, singleInputFieldRef) => {
+export const useRangePosition = props => {
   const [rangePosition, setRangePosition] = useControlled({
     name: 'useRangePosition',
     state: 'rangePosition',
     controlled: props.rangePosition,
     default: props.defaultRangePosition ?? 'start'
   });
-
-  // When using a single input field,
-  // we want to select the 1st section of the edited date when updating the range position.
-  const syncRangePositionWithSingleInputField = newRangePosition => {
-    if (singleInputFieldRef?.current == null) {
-      return;
-    }
-    const sections = singleInputFieldRef.current.getSections();
-    const targetActiveSectionIndex = newRangePosition === 'start' ? 0 : sections.length / 2;
-    const activeSectionIndex = singleInputFieldRef.current.getActiveSectionIndex();
-    // if the active section is already within the target range, we don't need to update it.
-    if (activeSectionIndex && activeSectionIndex >= targetActiveSectionIndex && activeSectionIndex < targetActiveSectionIndex + sections.length / 2) {
-      return;
-    }
-    singleInputFieldRef.current.setSelectedSections(targetActiveSectionIndex);
-  };
   const handleRangePositionChange = useEventCallback(newRangePosition => {
     setRangePosition(newRangePosition);
     props.onRangePositionChange?.(newRangePosition);
-    syncRangePositionWithSingleInputField(newRangePosition);
   });
   return {
     rangePosition,

package/esm/internals/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -39,10 +39,10 @@ export const useStaticRangePicker = _ref => {
     renderCurrentView
   } = usePicker(_extends({}, pickerParams, {
     props,
+    variant: displayStaticWrapperAs,
     autoFocusView: autoFocus ?? false,
-    fieldRef: undefined,
-    localeText,
-    variant: displayStaticWrapperAs
+    viewContainerRole: null,
+    localeText
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const renderPicker = () => /*#__PURE__*/_jsx(PickerRangePositionContext.Provider, {

package/esm/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js

@@ -12,10 +12,11 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useSlotProps from '@mui/utils/useSlotProps';
 import useForkRef from '@mui/utils/useForkRef';
-import { cleanFieldResponse, useFieldOwnerState, useNullablePickerContext } from '@mui/x-date-pickers/internals';
+import { cleanFieldResponse, useFieldOwnerState, PickerFieldUIContext, useNullablePickerContext } 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 { useTextFieldProps } from "./useTextFieldProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function createMultiInputRangeField({
   useManager,
@@ -52,14 +53,19 @@ export function createMultiInputRangeField({
       // eslint-disable-next-line material-ui/mui-name-matches-component-name
       name
     });
+    const pickerFieldUIContext = React.useContext(PickerFieldUIContext);
+    const pickerContext = useNullablePickerContext();
     const manager = useManager({
       enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure,
       dateSeparator: props.dateSeparator
     });
     const {
-      internalProps,
+      internalProps: rawInternalProps,
       forwardedProps
     } = useSplitFieldProps(themeProps, manager.valueType);
+    const internalProps = pickerContext?.variant === 'mobile' ? _extends({}, rawInternalProps, {
+      readOnly: true
+    }) : rawInternalProps;
     const {
         slots,
         slotProps,
@@ -69,7 +75,6 @@ export function createMultiInputRangeField({
       otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
     const classes = useUtilityClasses(classesProp);
     const ownerState = useFieldOwnerState(internalProps);
-    const pickerContext = useNullablePickerContext();
     const handleRef = useForkRef(ref, pickerContext?.rootRef);
     const Root = slots?.root ?? MultiInputRangeFieldRoot;
     const rootProps = useSlotProps({
@@ -82,29 +87,22 @@ export function createMultiInputRangeField({
       ownerState,
       className: clsx(className, classes.root)
     });
-    const startTextFieldProps = useSlotProps({
-      elementType: PickersTextField,
-      externalSlotProps: slotProps?.textField,
-      ownerState: _extends({}, ownerState, {
-        position: 'start'
-      })
+    const startTextFieldProps = useTextFieldProps({
+      slotProps,
+      ownerState,
+      position: 'start'
     });
-    const endTextFieldProps = useSlotProps({
-      elementType: PickersTextField,
-      externalSlotProps: slotProps?.textField,
-      ownerState: _extends({}, ownerState, {
-        position: 'end'
-      })
+    const endTextFieldProps = useTextFieldProps({
+      slotProps,
+      ownerState,
+      position: 'end'
     });
-    const {
-      startDate,
-      endDate,
-      enableAccessibleFieldDOMStructure
-    } = useMultiInputRangeField({
+    const fieldResponse = useMultiInputRangeField({
       manager,
       internalProps,
-      startForwardedProps: startTextFieldProps,
-      endForwardedProps: endTextFieldProps
+      rootProps,
+      startTextFieldProps,
+      endTextFieldProps
     });
     const Separator = slots?.separator ?? MultiInputRangeFieldSeparator;
     const separatorProps = useSlotProps({
@@ -116,19 +114,15 @@ export function createMultiInputRangeField({
       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, {
+    const cleanStartTextFieldResponse = cleanFieldResponse(fieldResponse.startTextField);
+    const cleanEndTextFieldResponse = cleanFieldResponse(fieldResponse.endTextField);
+    const TextField = slots?.textField ?? pickerFieldUIContext.slots.textField ?? (fieldResponse.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
+    return /*#__PURE__*/_jsxs(Root, _extends({}, fieldResponse.root, {
       children: [/*#__PURE__*/_jsx(TextField, _extends({
         fullWidth: true
-      }, startDateProps)), /*#__PURE__*/_jsx(Separator, _extends({}, separatorProps)), /*#__PURE__*/_jsx(TextField, _extends({
+      }, cleanStartTextFieldResponse.textFieldProps)), /*#__PURE__*/_jsx(Separator, _extends({}, separatorProps)), /*#__PURE__*/_jsx(TextField, _extends({
         fullWidth: true
-      }, endDateProps))]
+      }, cleanEndTextFieldResponse.textFieldProps))]
     }));
   });
   MultiInputRangeField.fieldType = 'multi-input';

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

@@ -7,7 +7,7 @@ import { FieldOwnerState } from '@mui/x-date-pickers/models';
 import { PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerFieldInternalProps } from '@mui/x-date-pickers/internals';
 import { FieldType, MultiInputFieldRefs, RangeFieldSeparatorProps, RangePosition } from "../../../models/index.js";
 import { PickerAnyRangeManager } from "../../models/managers.js";
-export type MultiInputRangeFieldProps<TManager extends PickerAnyRangeManager> = MultiInputFieldRefs & RangeFieldSeparatorProps & Omit<PickerManagerFieldInternalProps<TManager>, 'unstableFieldRef' | 'clearable' | 'onClear'> & Omit<StackProps, 'position' | keyof PickerManagerFieldInternalProps<TManager>> & {
+export type MultiInputRangeFieldProps<TManager extends PickerAnyRangeManager> = MultiInputFieldRefs & RangeFieldSeparatorProps & Omit<PickerManagerFieldInternalProps<TManager>, 'unstableFieldRef' | 'clearable' | 'onClear' | 'focused'> & Omit<StackProps, 'position' | keyof PickerManagerFieldInternalProps<TManager>> & {
   /**
    * If `true`, the field is focused during the first mount.
    * @default false

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

@@ -0,0 +1,12 @@
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { MultiInputRangeFieldSlotProps } from "./createMultiInputRangeField.types.js";
+export declare function useTextFieldProps({
+  slotProps,
+  ownerState,
+  position
+}: {
+  slotProps: MultiInputRangeFieldSlotProps | undefined;
+  ownerState: FieldOwnerState;
+  position: 'start' | 'end';
+}): PickersTextFieldProps;

package/esm/internals/utils/createMultiInputRangeField/useTextFieldProps.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useSlotProps from '@mui/utils/useSlotProps';
+import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { PickerFieldUIContext, useNullablePickerContext, mergeSlotProps } from '@mui/x-date-pickers/internals';
+import { useNullablePickerRangePositionContext } from "../../hooks/useNullablePickerRangePositionContext.js";
+export function useTextFieldProps({
+  slotProps,
+  ownerState,
+  position
+}) {
+  const pickerContext = useNullablePickerContext();
+  const translations = usePickerTranslations();
+  const pickerFieldUIContext = React.useContext(PickerFieldUIContext);
+  const rangePositionContext = useNullablePickerRangePositionContext();
+  const textFieldProps = useSlotProps({
+    elementType: PickersTextField,
+    externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.textField, slotProps?.textField),
+    additionalProps: {
+      // TODO: Decide if we also want to set the default labels on standalone fields.
+      label: pickerContext ? translations[position] : undefined,
+      focused: pickerContext?.open ? rangePositionContext?.rangePosition === position : undefined
+    },
+    ownerState: _extends({}, ownerState, {
+      position
+    })
+  });
+  if (!textFieldProps.InputProps) {
+    textFieldProps.InputProps = {};
+  }
+  if (pickerContext && position === 'start') {
+    textFieldProps.InputProps.ref = pickerContext.triggerRef;
+  }
+  return textFieldProps;
+}

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

@@ -17,4 +17,7 @@ export declare const removeLastSeparator: (dateSections: FieldRangeSection[]) =>
   modified: boolean;
   startSeparator: string;
   endSeparator: string;
-})[];
+})[];
+export declare function getRangeFieldType(field: React.ElementType & {
+  fieldType?: 'single-input' | 'multi-input';
+}): "single-input" | "multi-input";

package/esm/internals/utils/date-fields-utils.js

@@ -21,4 +21,8 @@ export const removeLastSeparator = dateSections => dateSections.map((section, se
     });
   }
   return section;
-});
+});
+export function getRangeFieldType(field) {
+  const fieldType = field.fieldType ?? 'multi-input';
+  return fieldType;
+}

package/esm/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczOTc0NjgwMDAwMA==";
+  const releaseInfo = "MTc0MDY5NzIwMDAwMA==";
   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/esm/managers/useDateRangeManager.js

@@ -28,6 +28,13 @@ export function useDateRangeManager(parameters = {}) {
       internalProps
     })),
     // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
-    internal_getOpenPickerButtonAriaLabel: () => ''
+    internal_getOpenPickerButtonAriaLabel: ({
+      value,
+      utils,
+      localeText
+    }) => {
+      const formattedValue = utils.isValid(value[0]) ? utils.format(value[0], 'fullDate') : null;
+      return localeText.openDatePickerDialogue(formattedValue);
+    }
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }

package/esm/managers/useDateTimeRangeManager.js

@@ -28,6 +28,13 @@ export function useDateTimeRangeManager(parameters = {}) {
       defaultDates
     })),
     // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
-    internal_getOpenPickerButtonAriaLabel: () => ''
+    internal_getOpenPickerButtonAriaLabel: ({
+      value,
+      utils,
+      localeText
+    }) => {
+      const formattedValue = utils.isValid(value[0]) ? utils.format(value[0], 'fullDate') : null;
+      return localeText.openDatePickerDialogue(formattedValue);
+    }
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }

package/esm/managers/useTimeRangeManager.js

@@ -26,6 +26,15 @@ export function useTimeRangeManager(parameters = {}) {
       internalProps
     })),
     // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
-    internal_getOpenPickerButtonAriaLabel: () => ''
+    internal_getOpenPickerButtonAriaLabel: ({
+      value,
+      utils,
+      localeText
+    }) => {
+      // TODO: Use ampm prop?
+      const ampm = utils.is12HourCycleInCurrentLocale();
+      const formattedValue = utils.isValid(value[0]) ? utils.format(value[0], ampm ? 'fullTime12h' : 'fullTime24h') : null;
+      return localeText.openTimePickerDialogue(formattedValue);
+    }
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }