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

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 = "MTc0MTMwMjAwMDAwMA==";
   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/internals/utils/valueManagers.js

@@ -52,16 +52,8 @@ export const getRangeFieldValueManager = ({
     }
     return [prevReferenceValue[1], value[1]];
   },
-  getSectionsFromValue: (utils, [start, end], fallbackSections, getSectionsFromDate) => {
-    const separatedFallbackSections = fallbackSections == null ? {
-      startDate: null,
-      endDate: null
-    } : splitDateRangeSections(fallbackSections);
-    const getSections = (newDate, fallbackDateSections, position) => {
-      const shouldReUsePrevDateSections = !utils.isValid(newDate) && !!fallbackDateSections;
-      if (shouldReUsePrevDateSections) {
-        return fallbackDateSections;
-      }
+  getSectionsFromValue: ([start, end], getSectionsFromDate) => {
+    const getSections = (newDate, position) => {
       const sections = getSectionsFromDate(newDate);
       return sections.map((section, sectionIndex) => {
         if (sectionIndex === sections.length - 1 && position === 'start') {
@@ -76,7 +68,7 @@ export const getRangeFieldValueManager = ({
         });
       });
     };
-    return [...getSections(start, separatedFallbackSections.startDate, 'start'), ...getSections(end, separatedFallbackSections.endDate, 'end')];
+    return [...getSections(start, 'start'), ...getSections(end, 'end')];
   },
   getV7HiddenInputValueFromSections: sections => {
     const dateRangeSections = splitDateRangeSections(sections);
@@ -96,23 +88,32 @@ export const getRangeFieldValueManager = ({
       return parseDate(dateStr.trim(), referenceValue[index]);
     });
   },
-  getActiveDateManager: (utils, state, activeSection) => {
-    const index = activeSection.dateName === 'start' ? 0 : 1;
-    const updateDateInRange = (newDate, prevDateRange) => index === 0 ? [newDate, prevDateRange[1]] : [prevDateRange[0], newDate];
-    return {
-      date: state.value[index],
-      referenceDate: state.referenceValue[index],
-      getSections: sections => {
-        const dateRangeSections = splitDateRangeSections(sections);
-        if (index === 0) {
-          return removeLastSeparator(dateRangeSections.startDate);
-        }
-        return dateRangeSections.endDate;
-      },
-      getNewValuesFromNewActiveDate: newActiveDate => ({
-        value: updateDateInRange(newActiveDate, state.value),
-        referenceValue: !utils.isValid(newActiveDate) ? state.referenceValue : updateDateInRange(newActiveDate, state.referenceValue)
-      })
-    };
+  getDateFromSection: (value, activeSection) => value[getActiveDateIndex(activeSection)],
+  getDateSectionsFromValue: (sections, activeSection) => {
+    const dateRangeSections = splitDateRangeSections(sections);
+    if (getActiveDateIndex(activeSection) === 0) {
+      return removeLastSeparator(dateRangeSections.startDate);
+    }
+    return dateRangeSections.endDate;
+  },
+  updateDateInValue: (value, activeSection, activeDate) => {
+    if (getActiveDateIndex(activeSection) === 0) {
+      return [activeDate, value[1]];
+    }
+    return [value[0], activeDate];
+  },
+  clearDateSections: (sections, activeSection) => {
+    const dateRangeSections = splitDateRangeSections(sections);
+    if (getActiveDateIndex(activeSection) === 0) {
+      return [...dateRangeSections.startDate.map(section => _extends({}, section, {
+        value: ''
+      })), ...dateRangeSections.endDate];
+    }
+    return [...dateRangeSections.startDate, ...dateRangeSections.endDate.map(section => _extends({}, section, {
+      value: ''
+    }))];
   }
-});
+});
+function getActiveDateIndex(activeSection) {
+  return activeSection == null || activeSection.dateName === 'start' ? 0 : 1;
+}

package/esm/managers/useDateRangeManager.d.ts

@@ -7,7 +7,5 @@ export declare function useDateRangeManager<TEnableAccessibleFieldDOMStructure e
 export interface UseDateRangeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> extends RangeFieldSeparatorProps {
   enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
 }
-export type UseDateRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError, DateRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>, DateRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure>>;
-export interface DateRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, 'format'>, RangeFieldSeparatorProps, ExportedValidateDateRangeProps {}
-interface DateRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure extends boolean> extends UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, ValidateDateRangeProps, RangeFieldSeparatorProps {}
-export {};
+export type UseDateRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError, ValidateDateRangeProps, DateRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>>;
+export interface DateRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, 'format'>, RangeFieldSeparatorProps, ExportedValidateDateRangeProps {}

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.d.ts

@@ -7,7 +7,5 @@ export declare function useDateTimeRangeManager<TEnableAccessibleFieldDOMStructu
 export interface UseDateTimeRangeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> extends RangeFieldSeparatorProps {
   enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
 }
-export type UseDateTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError, DateTimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>, DateTimeRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure>>;
-export interface DateTimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, 'format'>, ExportedValidateDateTimeRangeProps, AmPmProps, RangeFieldSeparatorProps {}
-interface DateTimeRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure extends boolean> extends UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, ValidateDateTimeRangeProps, RangeFieldSeparatorProps {}
-export {};
+export type UseDateTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError, ValidateDateTimeRangeProps, DateTimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>>;
+export interface DateTimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, 'format'>, ExportedValidateDateTimeRangeProps, AmPmProps, RangeFieldSeparatorProps {}

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.d.ts

@@ -7,7 +7,5 @@ export declare function useTimeRangeManager<TEnableAccessibleFieldDOMStructure e
 export interface UseTimeRangeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> extends RangeFieldSeparatorProps {
   enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
 }
-export type UseTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError, TimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>, TimeRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure>>;
-export interface TimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, 'format'>, ExportedValidateTimeRangeProps, AmPmProps, RangeFieldSeparatorProps {}
-interface TimeRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure extends boolean> extends UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, ValidateTimeRangeProps {}
-export {};
+export type UseTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError, ValidateTimeRangeProps, TimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>>;
+export interface TimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, 'format'>, ExportedValidateTimeRangeProps, AmPmProps, RangeFieldSeparatorProps {}

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]);
 }

package/esm/models/fields.d.ts

@@ -1,24 +1,16 @@
 import * as React from 'react';
-import { UseFieldResponse, FormProps, PickerValue, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { PickerValue, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { FieldRef, PickerFieldSlotProps } from '@mui/x-date-pickers/models';
+import type { UseMultiInputRangeFieldTextFieldProps } from '../hooks/useMultiInputRangeField';
 export type { FieldRangeSection } from '@mui/x-date-pickers/internals';
 export type FieldType = 'single-input' | 'multi-input';
 /**
  * Props the `textField` slot of the multi input field can receive when used inside a picker.
  */
-export interface MultiInputFieldSlotTextFieldProps extends FormProps {
+export type MultiInputFieldSlotTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = UseMultiInputRangeFieldTextFieldProps<TEnableAccessibleFieldDOMStructure, {
   label?: React.ReactNode;
-  id?: string;
-  onKeyDown?: React.KeyboardEventHandler;
-  onClick?: React.MouseEventHandler;
-  onFocus?: React.FocusEventHandler;
   focused?: boolean;
-  InputProps?: {
-    ref?: React.Ref<any>;
-    endAdornment?: React.ReactNode;
-    startAdornment?: React.ReactNode;
-  };
-}
+}>;
 /**
  * Props the `root` slot of the multi input field can receive when used inside a picker.
  */
@@ -39,9 +31,4 @@ export interface RangeFieldSeparatorProps {
 /**
  * Props the `slotProps.field` of a range picker component can receive.
  */
-export type PickerRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> = PickerFieldSlotProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure> & RangeFieldSeparatorProps;
-/**
- * Props the text field receives when used with a multi input picker.
- * Only contains what the MUI components are passing to the text field, not what users can pass using the `props.slotProps.textField`.
- */
-export type BaseMultiInputPickersTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = Omit<UseFieldResponse<TEnableAccessibleFieldDOMStructure, MultiInputFieldSlotTextFieldProps>, 'slots' | 'slotProps' | 'clearable' | 'onClear' | 'openPickerButtonPosition' | 'clearButtonPosition' | 'openPickerAriaLabel'>;
+export type PickerRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> = PickerFieldSlotProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure> & RangeFieldSeparatorProps;

package/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export { usePickerRangePositionContext } from "./usePickerRangePositionContext.js";
-export { useMultiInputRangeField as unstable_useMultiInputRangeField } from "./useMultiInputRangeField/index.js";
+export { useMultiInputRangeField as unstable_useMultiInputRangeField } from "./useMultiInputRangeField/index.js";
+export type { UseMultiInputRangeFieldTextFieldProps } from './useMultiInputRangeField';

package/hooks/useMultiInputRangeField/index.d.ts

@@ -1 +1,2 @@
-export { useMultiInputRangeField } from "./useMultiInputRangeField.js";
+export { useMultiInputRangeField } from "./useMultiInputRangeField.js";
+export type { UseMultiInputRangeFieldTextFieldProps } from './useMultiInputRangeField';

package/hooks/useMultiInputRangeField/useMultiInputRangeField.d.ts

@@ -1,5 +1,7 @@
 import { PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerFieldInternalProps, UseFieldResponse } from '@mui/x-date-pickers/internals';
+import { UseTextFieldBaseForwardedProps } from "./useTextFieldProps.js";
 import { PickerAnyRangeManager } from "../../internals/models/managers.js";
+import { UseMultiInputRangeFieldRootPropsReturnValue } from "./useMultiInputRangeFieldRootProps.js";
 /**
  * Basic example:
  *
@@ -12,42 +14,59 @@ import { PickerAnyRangeManager } from "../../internals/models/managers.js";
  * function MultiInputField(props) {
  *   const manager = useDateRangeManager();
  *   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
- *   const { startDate, endDate } = useMultiInputRangeField({
+ *   const response = useMultiInputRangeField({
  *     manager,
  *     internalProps,
- *     startForwardedProps: forwardedProps,
- *     endForwardedProps: forwardedProps,
+ *     startTextFieldProps: {},
+ *     endTextFieldProps: {},
+ *     rootProps: forwardedProps,
  *   });
  *
  *   return (
- *     <Box {...forwardedProps}>
- *       <PickersTextField {...startDate} />
+ *     <Box {...response.root}>
+ *       <PickersTextField {...response.startTextField} />
  *       <span>{' – '}</span>
- *       <PickersTextField {...endDate} />
+ *       <PickersTextField {...response.endTextField} />
  *     </Box>
  *   );
  * }
  * ```
  *
- * @param {UseMultiInputRangeFieldParameters<TManager, TForwardedProps>} parameters The parameters of the hook.
+ * @param {UseMultiInputRangeFieldParameters<TManager, TTextFieldProps>} parameters The parameters of the hook.
  * @param {TManager} parameters.manager The manager of the field.
  * @param {PickerManagerFieldInternalProps<TManager>} parameters.internalProps The internal props of the field.
- * @param {TForwardedProps} parameters.startForwardedProps The forwarded props of the start field.
- * @param {TForwardedProps} parameters.endForwardedProps The forwarded props of the end field.
- * @returns {UseMultiInputRangeFieldReturnValue<TManager, TForwardedProps>} The props to pass to the start and the end components.
+ * @param {TTextFieldProps} parameters.startForwardedProps The forwarded props of the start field.
+ * @param {TTextFieldProps} parameters.endForwardedProps The forwarded props of the end field.
+ * @returns {UseMultiInputRangeFieldReturnValue<TManager, TTextFieldProps>} The props to pass to the start and the end components.
  */
-export declare function useMultiInputRangeField<TManager extends PickerAnyRangeManager, TForwardedProps extends {
+export declare function useMultiInputRangeField<TManager extends PickerAnyRangeManager, TTextFieldProps extends UseTextFieldBaseForwardedProps, TRootProps extends {
   [key: string]: any;
-}>(parameters: UseMultiInputRangeFieldParameters<TManager, TForwardedProps>): UseMultiInputRangeFieldReturnValue<TManager, TForwardedProps>;
-interface UseMultiInputRangeFieldParameters<TManager extends PickerAnyRangeManager, TForwardedProps extends {}> {
+}>(parameters: UseMultiInputRangeFieldParameters<TManager, TTextFieldProps, TRootProps>): UseMultiInputRangeFieldReturnValue<TManager, TTextFieldProps, TRootProps>;
+interface UseMultiInputRangeFieldParameters<TManager extends PickerAnyRangeManager, TTextFieldProps extends {
+  [key: string]: any;
+}, TRootProps extends {
+  [key: string]: any;
+}> {
   manager: TManager;
   internalProps: PickerManagerFieldInternalProps<TManager>;
-  startForwardedProps: TForwardedProps;
-  endForwardedProps: TForwardedProps;
+  rootProps: TRootProps;
+  startTextFieldProps: TTextFieldProps;
+  endTextFieldProps: TTextFieldProps;
 }
-interface UseMultiInputRangeFieldReturnValue<TManager extends PickerAnyRangeManager, TForwardedProps extends {}> {
-  startDate: Omit<UseFieldResponse<PickerManagerEnableAccessibleFieldDOMStructure<TManager>, TForwardedProps>, 'clearable' | 'onClear'>;
-  endDate: Omit<UseFieldResponse<PickerManagerEnableAccessibleFieldDOMStructure<TManager>, TForwardedProps>, 'clearable' | 'onClear'>;
+interface UseMultiInputRangeFieldReturnValue<TManager extends PickerAnyRangeManager, TTextFieldProps extends {
+  [key: string]: any;
+}, TRootProps extends {
+  [key: string]: any;
+}> {
+  root: UseMultiInputRangeFieldRootPropsReturnValue<TRootProps>;
+  startTextField: UseMultiInputRangeFieldTextFieldProps<PickerManagerEnableAccessibleFieldDOMStructure<TManager>, TTextFieldProps>;
+  endTextField: UseMultiInputRangeFieldTextFieldProps<PickerManagerEnableAccessibleFieldDOMStructure<TManager>, TTextFieldProps>;
   enableAccessibleFieldDOMStructure: PickerManagerEnableAccessibleFieldDOMStructure<TManager>;
 }
+export type UseMultiInputRangeFieldTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseTextFieldBaseForwardedProps> = Omit<UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps & {
+  onKeyDown: React.KeyboardEventHandler;
+  onClick: React.MouseEventHandler;
+  onFocus: React.FocusEventHandler;
+  id: string;
+}>, 'onClear' | 'clearable' | 'openPickerAriaLabel'>;
 export {};