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

package/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/modern/DateRangePicker/DateRangePicker.types.d.ts

@@ -1,4 +1,4 @@
-import { BaseSingleInputFieldProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/internals';
 import { DesktopDateRangePickerProps, DesktopDateRangePickerSlots, DesktopDateRangePickerSlotProps } from "../DesktopDateRangePicker/index.js";
 import { MobileDateRangePickerProps, MobileDateRangePickerSlots, MobileDateRangePickerSlotProps } from "../MobileDateRangePicker/index.js";
 import { ValidateDateRangeProps } from "../validation/index.js";
@@ -30,4 +30,4 @@ export interface DateRangePickerProps<TEnableAccessibleFieldDOMStructure extends
 /**
  * Props the field can receive when used inside a date range picker (<DateRangePicker />, <DesktopDateRangePicker /> or <MobileDateRangePicker /> component).
  */
-export type DateRangePickerFieldProps = ValidateDateRangeProps & BaseSingleInputFieldProps<PickerRangeValue>;
+export type DateRangePickerFieldProps = ValidateDateRangeProps & BaseSingleInputFieldProps;

package/modern/DateTimeRangePicker/DateTimeRangePicker.types.d.ts

@@ -1,4 +1,4 @@
-import { BaseSingleInputFieldProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/internals';
 import { DesktopDateTimeRangePickerProps, DesktopDateTimeRangePickerSlots, DesktopDateTimeRangePickerSlotProps } from "../DesktopDateTimeRangePicker/index.js";
 import { MobileDateTimeRangePickerProps, MobileDateTimeRangePickerSlots, MobileDateTimeRangePickerSlotProps } from "../MobileDateTimeRangePicker/index.js";
 import type { ValidateDateTimeRangeProps } from '../validation';
@@ -25,4 +25,4 @@ export interface DateTimeRangePickerProps<TEnableAccessibleFieldDOMStructure ext
 /**
  * Props the field can receive when used inside a date time range picker (<DateTimeRangePicker />, <DesktopDateTimeRangePicker /> or <MobileDateTimeRangePicker /> component).
  */
-export type DateTimeRangePickerFieldProps = ValidateDateTimeRangeProps & BaseSingleInputFieldProps<PickerRangeValue>;
+export type DateTimeRangePickerFieldProps = ValidateDateTimeRangeProps & BaseSingleInputFieldProps;

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -10,7 +10,7 @@ import { refType } from '@mui/utils';
 import { rangeValueManager } from "../internals/utils/valueManagers.js";
 import { useDateRangePickerDefaultizedProps } from "../DateRangePicker/shared.js";
 import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js";
-import { MultiInputDateRangeField } from "../MultiInputDateRangeField/index.js";
+import { SingleInputDateRangeField } from "../SingleInputDateRangeField/index.js";
 import { useDesktopRangePicker } from "../internals/hooks/useDesktopRangePicker/index.js";
 import { validateDateRange } from "../validation/index.js";
 const emptyActions = [];
@@ -41,7 +41,7 @@ const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDat
     views: ['day'],
     openTo: 'day',
     slots: _extends({
-      field: MultiInputDateRangeField
+      field: SingleInputDateRangeField
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
       field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps)),

package/modern/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -19,7 +19,7 @@ import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js"
 import { useDesktopRangePicker } from "../internals/hooks/useDesktopRangePicker/index.js";
 import { validateDateTimeRange } from "../validation/index.js";
 import { useDateTimeRangePickerDefaultizedProps } from "../DateTimeRangePicker/shared.js";
-import { MultiInputDateTimeRangeField } from "../MultiInputDateTimeRangeField/index.js";
+import { SingleInputDateTimeRangeField } from "../SingleInputDateTimeRangeField/index.js";
 import { DateTimeRangePickerTimeWrapper } from "../DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js";
 import { RANGE_VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { usePickerRangePositionContext } from "../hooks/index.js";
@@ -107,7 +107,7 @@ const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
     ampmInClock: true,
     calendars: defaultizedProps.calendars ?? 1,
     slots: _extends({
-      field: MultiInputDateTimeRangeField,
+      field: SingleInputDateTimeRangeField,
       layout: DesktopDateTimePickerLayout
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {

package/modern/MobileDateRangePicker/MobileDateRangePicker.js

@@ -10,7 +10,7 @@ import { refType } from '@mui/utils';
 import { rangeValueManager } from "../internals/utils/valueManagers.js";
 import { useDateRangePickerDefaultizedProps } from "../DateRangePicker/shared.js";
 import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js";
-import { MultiInputDateRangeField } from "../MultiInputDateRangeField/index.js";
+import { SingleInputDateRangeField } from "../SingleInputDateRangeField/index.js";
 import { useMobileRangePicker } from "../internals/hooks/useMobileRangePicker/index.js";
 import { validateDateRange } from "../validation/index.js";
 /**
@@ -41,7 +41,7 @@ const MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateR
     views: ['day'],
     openTo: 'day',
     slots: _extends({
-      field: MultiInputDateRangeField
+      field: SingleInputDateRangeField
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
       field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps)),

package/modern/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -17,7 +17,7 @@ import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js"
 import { useMobileRangePicker } from "../internals/hooks/useMobileRangePicker/index.js";
 import { validateDateTimeRange } from "../validation/index.js";
 import { useDateTimeRangePickerDefaultizedProps } from "../DateTimeRangePicker/shared.js";
-import { MultiInputDateTimeRangeField } from "../MultiInputDateTimeRangeField/index.js";
+import { SingleInputDateTimeRangeField } from "../SingleInputDateTimeRangeField/index.js";
 import { DateTimeRangePickerTimeWrapper } from "../DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js";
 import { RANGE_VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { usePickerRangePositionContext } from "../hooks/index.js";
@@ -113,7 +113,7 @@ const MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileD
     // force current calendar position, since we only have one calendar
     currentMonthCalendarPosition: 1,
     slots: _extends({
-      field: MultiInputDateTimeRangeField
+      field: SingleInputDateTimeRangeField
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
       field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps)),

package/modern/SingleInputDateRangeField/useSingleInputDateRangeField.d.ts

@@ -1,2 +1,2 @@
 import { UseSingleInputDateRangeFieldProps } from "./SingleInputDateRangeField.types.js";
-export declare const useSingleInputDateRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("@mui/x-date-pickers/internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "unstableFieldRef" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "enableAccessibleFieldDOMStructure" | "timezone" | keyof import("@mui/x-date-pickers/internals").BaseDateValidationProps | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | "unstableStartFieldRef" | "unstableEndFieldRef" | "dateSeparator">>;
+export declare const useSingleInputDateRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("@mui/x-date-pickers/internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "focused" | "enableAccessibleFieldDOMStructure" | "referenceDate" | "timezone" | "formatDensity" | "selectedSections" | "onSelectedSectionsChange" | "shouldRespectLeadingZeros" | "unstableFieldRef" | keyof import("@mui/x-date-pickers/internals").BaseDateValidationProps | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | "unstableStartFieldRef" | "unstableEndFieldRef" | "dateSeparator">>;

package/modern/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.d.ts

@@ -1,2 +1,2 @@
 import { UseSingleInputDateTimeRangeFieldProps } from "./SingleInputDateTimeRangeField.types.js";
-export declare const useSingleInputDateTimeRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("@mui/x-date-pickers/internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "unstableFieldRef" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "enableAccessibleFieldDOMStructure" | "timezone" | "ampm" | "disableFuture" | "maxDate" | "disablePast" | "minDate" | "minTime" | "maxTime" | "minutesStep" | "shouldDisableTime" | "disableIgnoringDatePartForTimeValidation" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | "minDateTime" | "maxDateTime" | "unstableStartFieldRef" | "unstableEndFieldRef" | "dateSeparator">>;
+export declare const useSingleInputDateTimeRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("@mui/x-date-pickers/internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "focused" | "enableAccessibleFieldDOMStructure" | "referenceDate" | "timezone" | "formatDensity" | "selectedSections" | "onSelectedSectionsChange" | "shouldRespectLeadingZeros" | "unstableFieldRef" | "ampm" | "disableFuture" | "maxDate" | "disablePast" | "minDate" | "minTime" | "maxTime" | "minutesStep" | "shouldDisableTime" | "disableIgnoringDatePartForTimeValidation" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | "minDateTime" | "maxDateTime" | "unstableStartFieldRef" | "unstableEndFieldRef" | "dateSeparator">>;

package/modern/SingleInputTimeRangeField/useSingleInputTimeRangeField.d.ts

@@ -1,2 +1,2 @@
 import { UseSingleInputTimeRangeFieldProps } from "./SingleInputTimeRangeField.types.js";
-export declare const useSingleInputTimeRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("@mui/x-date-pickers/internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "unstableFieldRef" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "enableAccessibleFieldDOMStructure" | "timezone" | "ampm" | keyof import("@mui/x-date-pickers/internals").BaseTimeValidationProps | keyof import("@mui/x-date-pickers/internals").TimeValidationProps | "unstableStartFieldRef" | "unstableEndFieldRef" | "dateSeparator">>;
+export declare const useSingleInputTimeRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("@mui/x-date-pickers/internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "focused" | "enableAccessibleFieldDOMStructure" | "referenceDate" | "timezone" | "formatDensity" | "selectedSections" | "onSelectedSectionsChange" | "shouldRespectLeadingZeros" | "unstableFieldRef" | "ampm" | keyof import("@mui/x-date-pickers/internals").BaseTimeValidationProps | keyof import("@mui/x-date-pickers/internals").TimeValidationProps | "unstableStartFieldRef" | "unstableEndFieldRef" | "dateSeparator">>;

package/modern/dateRangeViewRenderers/dateRangeViewRenderers.d.ts

@@ -9,6 +9,11 @@ export interface DateRangeViewRendererProps<TView extends DateOrTimeViewWithMeri
  * because otherwise some unwanted props would be passed to the HTML element.
  */
 export declare const renderDateRangeViewCalendar: ({
+  views,
+  view,
+  onViewChange,
+  focusedView,
+  onFocusedViewChange,
   value,
   defaultValue,
   referenceDate,
@@ -40,8 +45,5 @@ export declare const renderDateRangeViewCalendar: ({
   disableDragEditing,
   displayWeekNumber,
   timezone,
-  availableRangePositions,
-  views,
-  view,
-  onViewChange
+  availableRangePositions
 }: DateRangeViewRendererProps<"day">) => React.JSX.Element;

package/modern/dateRangeViewRenderers/dateRangeViewRenderers.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { isDatePickerView } from '@mui/x-date-pickers/internals';
 import { DateRangeCalendar } from "../DateRangeCalendar/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -6,6 +7,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * because otherwise some unwanted props would be passed to the HTML element.
  */
 export const renderDateRangeViewCalendar = ({
+  views,
+  view,
+  onViewChange,
+  focusedView,
+  onFocusedViewChange,
   value,
   defaultValue,
   referenceDate,
@@ -37,11 +43,13 @@ export const renderDateRangeViewCalendar = ({
   disableDragEditing,
   displayWeekNumber,
   timezone,
-  availableRangePositions,
-  views,
-  view,
-  onViewChange
+  availableRangePositions
 }) => /*#__PURE__*/_jsx(DateRangeCalendar, {
+  view: view,
+  views: views,
+  onViewChange: onViewChange,
+  focusedView: focusedView && isDatePickerView(focusedView) ? focusedView : null,
+  onFocusedViewChange: onFocusedViewChange,
   value: value,
   defaultValue: defaultValue,
   referenceDate: referenceDate,
@@ -73,8 +81,5 @@ export const renderDateRangeViewCalendar = ({
   disableDragEditing: disableDragEditing,
   displayWeekNumber: displayWeekNumber,
   timezone: timezone,
-  availableRangePositions: availableRangePositions,
-  view: view,
-  views: views,
-  onViewChange: onViewChange
+  availableRangePositions: availableRangePositions
 });

package/modern/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/modern/hooks/useMultiInputRangeField/index.d.ts

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

package/modern/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 {};

package/modern/hooks/useMultiInputRangeField/useMultiInputRangeField.js

@@ -1,11 +1,11 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import useEventCallback from '@mui/utils/useEventCallback';
 import { useControlledValueWithTimezone, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals';
 import { useValidation } from '@mui/x-date-pickers/validation';
-import { useMultiInputRangeFieldTextFieldProps } from "./useMultiInputRangeFieldTextFieldProps.js";
+import { useTextFieldProps } from "./useTextFieldProps.js";
 import { useMultiInputRangeFieldSelectedSections } from "./useMultiInputRangeFieldSelectedSections.js";
+import { useMultiInputRangeFieldRootProps } from "./useMultiInputRangeFieldRootProps.js";
+
 /**
  * Basic example:
  *
@@ -18,36 +18,38 @@ import { useMultiInputRangeFieldSelectedSections } from "./useMultiInputRangeFie
  * 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 function useMultiInputRangeField(parameters) {
   const {
     manager,
     internalProps,
-    startForwardedProps,
-    endForwardedProps
+    rootProps,
+    startTextFieldProps,
+    endTextFieldProps
   } = parameters;
   const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
     manager,
@@ -84,34 +86,20 @@ export function useMultiInputRangeField(parameters) {
     onChange,
     valueManager: manager.internal_valueManager
   });
-  const {
-    validationError,
-    getValidationErrorForNewValue
-  } = useValidation({
+  const validation = useValidation({
     props: internalPropsWithDefaults,
     value,
     timezone,
     validator: manager.validator,
     onError: internalPropsWithDefaults.onError
   });
-  const buildChangeHandler = index => {
-    return (newSingleValue, rawContext) => {
-      const newRange = index === 0 ? [newSingleValue, value[1]] : [value[0], newSingleValue];
-      const context = _extends({}, rawContext, {
-        validationError: getValidationErrorForNewValue(newRange)
-      });
-      handleValueChange(newRange, context);
-    };
-  };
-  const handleStartDateChange = useEventCallback(buildChangeHandler(0));
-  const handleEndDateChange = useEventCallback(buildChangeHandler(1));
   const selectedSectionsResponse = useMultiInputRangeFieldSelectedSections({
     selectedSections,
     onSelectedSectionsChange,
     unstableStartFieldRef,
     unstableEndFieldRef
   });
-  const sharedProps = {
+  const sharedInternalProps = {
     disabled,
     readOnly,
     timezone,
@@ -120,30 +108,33 @@ export function useMultiInputRangeField(parameters) {
     shouldRespectLeadingZeros,
     enableAccessibleFieldDOMStructure
   };
-  const startDateProps = useMultiInputRangeFieldTextFieldProps({
+  const rootResponse = useMultiInputRangeFieldRootProps(rootProps);
+  const startTextFieldResponse = useTextFieldProps({
     valueType: manager.valueType,
-    fieldProps: _extends({
-      error: !!validationError[0]
-    }, startForwardedProps, selectedSectionsResponse.start, sharedProps, {
-      value: valueProp === undefined ? undefined : valueProp[0],
-      defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
-      onChange: handleStartDateChange,
-      autoFocus // Do not add on end field.
-    })
+    position: 'start',
+    value,
+    onChange: handleValueChange,
+    autoFocus,
+    validation,
+    forwardedProps: startTextFieldProps,
+    selectedSectionProps: selectedSectionsResponse.start,
+    sharedInternalProps
   });
-  const endDateProps = useMultiInputRangeFieldTextFieldProps({
+  const endTextFieldResponse = useTextFieldProps({
     valueType: manager.valueType,
-    fieldProps: _extends({
-      error: !!validationError[1]
-    }, endForwardedProps, selectedSectionsResponse.end, sharedProps, {
-      value: valueProp === undefined ? undefined : valueProp[1],
-      defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
-      onChange: handleEndDateChange
-    })
+    position: 'end',
+    value,
+    onChange: handleValueChange,
+    autoFocus,
+    validation,
+    forwardedProps: endTextFieldProps,
+    selectedSectionProps: selectedSectionsResponse.end,
+    sharedInternalProps
   });
   return {
-    startDate: startDateProps,
-    endDate: endDateProps,
+    root: rootResponse,
+    startTextField: startTextFieldResponse,
+    endTextField: endTextFieldResponse,
     enableAccessibleFieldDOMStructure
   };
 }

package/modern/hooks/useMultiInputRangeField/useMultiInputRangeFieldRootProps.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @ignore - internal hook.
+ */
+export declare function useMultiInputRangeFieldRootProps<TForwardedProps extends {
+  [key: string]: any;
+}>(forwardedProps: TForwardedProps): UseMultiInputRangeFieldRootPropsReturnValue<TForwardedProps>;
+export type UseMultiInputRangeFieldRootPropsReturnValue<TForwardedProps extends {
+  [key: string]: any;
+}> = Omit<TForwardedProps, 'onBlur'> & {
+  onBlur: () => void;
+};

package/modern/hooks/useMultiInputRangeField/useMultiInputRangeFieldRootProps.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useEventCallback from '@mui/utils/useEventCallback';
+import { executeInTheNextEventLoopTick, getActiveElement, useNullablePickerContext, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
+
+/**
+ * @ignore - internal hook.
+ */
+export function useMultiInputRangeFieldRootProps(forwardedProps) {
+  const pickerContext = useNullablePickerContext();
+  const privatePickerContext = usePickerPrivateContext();
+  const handleBlur = useEventCallback(() => {
+    if (!pickerContext || privatePickerContext.viewContainerRole !== 'tooltip') {
+      return;
+    }
+    executeInTheNextEventLoopTick(() => {
+      if (privatePickerContext.rootRefObject.current?.contains(getActiveElement(document)) || pickerContext.popupRef.current?.contains(getActiveElement(document))) {
+        return;
+      }
+      privatePickerContext.dismissViews();
+    });
+  });
+  return _extends({}, forwardedProps, {
+    onBlur: handleBlur
+  });
+}

package/modern/hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.d.ts

@@ -3,7 +3,7 @@ import { PickerRangeValue, PickerValue, UseFieldInternalProps } from '@mui/x-dat
 import { FieldRef, FieldSelectedSections } from '@mui/x-date-pickers/models';
 import { MultiInputFieldRefs } from "../../models/index.js";
 interface UseMultiInputRangeFieldSelectedSectionsParameters extends Pick<UseFieldInternalProps<PickerRangeValue, any, any>, 'selectedSections' | 'onSelectedSectionsChange'>, MultiInputFieldRefs {}
-interface UseMultiInputFieldSelectedSectionsResponseItem {
+export interface UseMultiInputFieldSelectedSectionsResponseItem {
   unstableFieldRef?: React.Ref<FieldRef<PickerValue>>;
   selectedSections: FieldSelectedSections;
   onSelectedSectionsChange: (newSelectedSections: FieldSelectedSections) => void;
@@ -12,5 +12,8 @@ interface UseMultiInputFieldSelectedSectionsResponse {
   start: UseMultiInputFieldSelectedSectionsResponseItem;
   end: UseMultiInputFieldSelectedSectionsResponseItem;
 }
+/**
+ * @ignore - internal hook.
+ */
 export declare const useMultiInputRangeFieldSelectedSections: (parameters: UseMultiInputRangeFieldSelectedSectionsParameters) => UseMultiInputFieldSelectedSectionsResponse;
 export {};

package/modern/hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.js

@@ -1,8 +1,9 @@
-'use client';
-
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import useEventCallback from '@mui/utils/useEventCallback';
+/**
+ * @ignore - internal hook.
+ */
 export const useMultiInputRangeFieldSelectedSections = parameters => {
   const unstableEndFieldRef = React.useRef(null);
   const handleUnstableEndFieldRef = useForkRef(parameters.unstableEndFieldRef, unstableEndFieldRef);

package/modern/hooks/useMultiInputRangeField/useTextFieldProps.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { UseValidationReturnValue } from '@mui/x-date-pickers/validation';
+import { PickerValueType } from '@mui/x-date-pickers/models';
+import { FieldChangeHandler, PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerError, PickerRangeValue, PickerValue, RangePosition, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { PickerAnyRangeManager } from "../../internals/models/managers.js";
+import { UseMultiInputFieldSelectedSectionsResponseItem } from "./useMultiInputRangeFieldSelectedSections.js";
+import type { UseMultiInputRangeFieldTextFieldProps } from './useMultiInputRangeField';
+/**
+ * @ignore - internal hook.
+ */
+export declare function useTextFieldProps<TManager extends PickerAnyRangeManager, TForwardedProps extends UseTextFieldBaseForwardedProps>(parameters: UseTextFieldPropsParameters<TManager, TForwardedProps>): UseMultiInputRangeFieldTextFieldProps<PickerManagerEnableAccessibleFieldDOMStructure<TManager>, TForwardedProps>;
+interface UseTextFieldPropsParameters<TManager extends PickerAnyRangeManager, TForwardedProps extends UseTextFieldBaseForwardedProps> {
+  valueType: PickerValueType;
+  value: PickerRangeValue;
+  onChange: FieldChangeHandler<PickerRangeValue, PickerManagerError<TManager>>;
+  autoFocus: boolean | undefined;
+  forwardedProps: TForwardedProps;
+  sharedInternalProps: UseTextFieldSharedInternalProps<TManager>;
+  selectedSectionProps: UseMultiInputFieldSelectedSectionsResponseItem;
+  position: RangePosition;
+  validation: UseValidationReturnValue<PickerRangeValue, PickerManagerError<TManager>>;
+}
+export interface UseTextFieldBaseForwardedProps {
+  onKeyDown?: React.KeyboardEventHandler;
+  onClick?: React.MouseEventHandler;
+  onFocus?: React.FocusEventHandler;
+  [key: string]: any;
+}
+interface UseTextFieldSharedInternalProps<TManager extends PickerAnyRangeManager> extends Pick<UseFieldInternalProps<PickerValue, PickerManagerEnableAccessibleFieldDOMStructure<TManager>, PickerManagerError<TManager>>, 'enableAccessibleFieldDOMStructure' | 'disabled' | 'readOnly' | 'timezone' | 'format' | 'formatDensity' | 'shouldRespectLeadingZeros'> {}
+export {};