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

package/modern/MultiInputTimeRangeField/MultiInputTimeRangeField.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { UseTimeRangeManagerReturnValue } from "../managers/index.js";
+import { MultiInputRangeFieldProps } from "../internals/utils/createMultiInputRangeField/index.js";
+import { MultiInputTimeRangeFieldClasses } from "./multiInputTimeRangeFieldClasses.js";
+export interface MultiInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MultiInputRangeFieldProps<UseTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure>> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<MultiInputTimeRangeFieldClasses>;
+}
+type MultiInputTimeRangeFieldComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: MultiInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [TimeRangeField](http://mui.com/x/react-date-pickers/time-range-field/)
+ * - [Fields](https://mui.com/x/react-date-pickers/fields/)
+ *
+ * API:
+ *
+ * - [MultiInputTimeRangeField API](https://mui.com/x/api/multi-input-time-range-field/)
+ */
+declare const MultiInputTimeRangeField: MultiInputTimeRangeFieldComponent;
+export { MultiInputTimeRangeField };

package/modern/MultiInputTimeRangeField/index.d.ts

@@ -0,0 +1,5 @@
+export { MultiInputTimeRangeField } from "./MultiInputTimeRangeField.js";
+export type { MultiInputTimeRangeFieldProps } from './MultiInputTimeRangeField';
+export { multiInputTimeRangeFieldClasses, getMultiInputTimeRangeFieldUtilityClass } from "./multiInputTimeRangeFieldClasses.js";
+export type { MultiInputTimeRangeFieldClassKey, MultiInputTimeRangeFieldClasses } from './multiInputTimeRangeFieldClasses';
+export type { MultiInputRangeFieldSlots as MultiInputTimeRangeFieldSlots, MultiInputRangeFieldSlotProps as MultiInputTimeRangeFieldSlotProps } from '../internals/utils/createMultiInputRangeField';

package/modern/MultiInputTimeRangeField/multiInputTimeRangeFieldClasses.d.ts

@@ -0,0 +1,5 @@
+import { MultiInputRangeFieldClasses } from "../internals/utils/createMultiInputRangeField/index.js";
+export interface MultiInputTimeRangeFieldClasses extends MultiInputRangeFieldClasses {}
+export type MultiInputTimeRangeFieldClassKey = keyof MultiInputRangeFieldClasses;
+export declare const multiInputTimeRangeFieldClasses: MultiInputRangeFieldClasses;
+export declare const getMultiInputTimeRangeFieldUtilityClass: (slot: string) => string;

package/modern/PickersRangeCalendarHeader/PickersRangeCalendarHeader.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { PickersRangeCalendarHeaderProps } from "./PickersRangeCalendarHeader.types.js";
+type PickersRangeCalendarHeaderComponent = ((props: PickersRangeCalendarHeaderProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+declare const PickersRangeCalendarHeader: PickersRangeCalendarHeaderComponent;
+export { PickersRangeCalendarHeader };

package/modern/PickersRangeCalendarHeader/PickersRangeCalendarHeader.types.d.ts

@@ -0,0 +1,17 @@
+import { PickerValidDate } from '@mui/x-date-pickers/models';
+import { ExportedPickersCalendarHeaderProps, PickersCalendarHeaderProps } from '@mui/x-date-pickers/PickersCalendarHeader';
+export interface PickersRangeCalendarHeaderProps extends PickersCalendarHeaderProps {
+  /**
+   * The number of calendars rendered.
+   */
+  calendars: 1 | 2 | 3;
+  /**
+   * Month used for this header.
+   */
+  month: PickerValidDate;
+  /**
+   * Index of the month used for this header.
+   */
+  monthIndex: number;
+}
+export interface ExportedPickersRangeCalendarHeaderProps extends ExportedPickersCalendarHeaderProps {}

package/modern/PickersRangeCalendarHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { PickersRangeCalendarHeader } from "./PickersRangeCalendarHeader.js";
+export type { PickersRangeCalendarHeaderProps, ExportedPickersRangeCalendarHeaderProps } from './PickersRangeCalendarHeader.types';

package/modern/SingleInputDateRangeField/SingleInputDateRangeField.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { SingleInputDateRangeFieldProps } from "./SingleInputDateRangeField.types.js";
+import { FieldType } from "../models/index.js";
+type DateRangeFieldComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: SingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+  fieldType?: FieldType;
+};
+/**
+ * Demos:
+ *
+ * - [DateRangeField](http://mui.com/x/react-date-pickers/date-range-field/)
+ * - [Fields](https://mui.com/x/react-date-pickers/fields/)
+ *
+ * API:
+ *
+ * - [SingleInputDateRangeField API](https://mui.com/x/api/single-input-date-range-field/)
+ */
+declare const SingleInputDateRangeField: DateRangeFieldComponent;
+export { SingleInputDateRangeField };

package/modern/SingleInputDateRangeField/SingleInputDateRangeField.types.d.ts

@@ -0,0 +1,18 @@
+import { ExportedPickerFieldUIProps, PickerFieldUISlots, PickerFieldUISlotProps } from '@mui/x-date-pickers/internals';
+import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models';
+import { DateRangeManagerFieldInternalProps } from "../managers/useDateRangeManager.js";
+export interface UseSingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DateRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>, Omit<ExportedPickerFieldUIProps, 'openPickerButtonPosition'> {}
+export type SingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseSingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>> & UseSingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SingleInputDateRangeFieldSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SingleInputDateRangeFieldSlotProps;
+};
+export interface SingleInputDateRangeFieldSlots extends PickerFieldUISlots {}
+export interface SingleInputDateRangeFieldSlotProps extends PickerFieldUISlotProps {}

package/modern/SingleInputDateRangeField/index.d.ts

@@ -0,0 +1,3 @@
+export { SingleInputDateRangeField } from "./SingleInputDateRangeField.js";
+export { useSingleInputDateRangeField as unstable_useSingleInputDateRangeField } from "./useSingleInputDateRangeField.js";
+export type { UseSingleInputDateRangeFieldProps, SingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types';

package/modern/SingleInputDateRangeField/useSingleInputDateRangeField.d.ts

@@ -0,0 +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" | "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/SingleInputDateTimeRangeField.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { SingleInputDateTimeRangeFieldProps } from "./SingleInputDateTimeRangeField.types.js";
+import { FieldType } from "../models/index.js";
+type DateRangeFieldComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: SingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+  fieldType?: FieldType;
+};
+/**
+ * Demos:
+ *
+ * - [DateTimeRangeField](http://mui.com/x/react-date-pickers/date-time-range-field/)
+ * - [Fields](https://mui.com/x/react-date-pickers/fields/)
+ *
+ * API:
+ *
+ * - [SingleInputDateTimeRangeField API](https://mui.com/x/api/single-input-date-time-range-field/)
+ */
+declare const SingleInputDateTimeRangeField: DateRangeFieldComponent;
+export { SingleInputDateTimeRangeField };

package/modern/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.d.ts

@@ -0,0 +1,18 @@
+import { ExportedPickerFieldUIProps, PickerFieldUISlots, PickerFieldUISlotProps } from '@mui/x-date-pickers/internals';
+import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models';
+import { DateTimeRangeManagerFieldInternalProps } from "../managers/useDateTimeRangeManager.js";
+export interface UseSingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DateTimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>, Omit<ExportedPickerFieldUIProps, 'openPickerButtonPosition'> {}
+export type SingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseSingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>> & UseSingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SingleInputDateTimeRangeFieldSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SingleInputDateTimeRangeFieldSlotProps;
+};
+export interface SingleInputDateTimeRangeFieldSlots extends PickerFieldUISlots {}
+export interface SingleInputDateTimeRangeFieldSlotProps extends PickerFieldUISlotProps {}

package/modern/SingleInputDateTimeRangeField/index.d.ts

@@ -0,0 +1,3 @@
+export { SingleInputDateTimeRangeField } from "./SingleInputDateTimeRangeField.js";
+export { useSingleInputDateTimeRangeField as unstable_useSingleInputDateTimeRangeField } from "./useSingleInputDateTimeRangeField.js";
+export type { UseSingleInputDateTimeRangeFieldProps, SingleInputDateTimeRangeFieldProps } from './SingleInputDateTimeRangeField.types';

package/modern/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.d.ts

@@ -0,0 +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" | "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/SingleInputTimeRangeField.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { SingleInputTimeRangeFieldProps } from "./SingleInputTimeRangeField.types.js";
+import { FieldType } from "../models/index.js";
+type DateRangeFieldComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: SingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+  fieldType?: FieldType;
+};
+/**
+ * Demos:
+ *
+ * - [TimeRangeField](http://mui.com/x/react-date-pickers/time-range-field/)
+ * - [Fields](https://mui.com/x/react-date-pickers/fields/)
+ *
+ * API:
+ *
+ * - [SingleInputTimeRangeField API](https://mui.com/x/api/single-input-time-range-field/)
+ */
+declare const SingleInputTimeRangeField: DateRangeFieldComponent;
+export { SingleInputTimeRangeField };

package/modern/SingleInputTimeRangeField/SingleInputTimeRangeField.types.d.ts

@@ -0,0 +1,18 @@
+import { ExportedPickerFieldUIProps, PickerFieldUISlots, PickerFieldUISlotProps } from '@mui/x-date-pickers/internals';
+import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models';
+import { TimeRangeManagerFieldInternalProps } from "../managers/useTimeRangeManager.js";
+export interface UseSingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends TimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>, Omit<ExportedPickerFieldUIProps, 'openPickerButtonPosition'> {}
+export type SingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseSingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>> & UseSingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SingleInputTimeRangeFieldSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SingleInputTimeRangeFieldSlotProps;
+};
+export interface SingleInputTimeRangeFieldSlots extends PickerFieldUISlots {}
+export interface SingleInputTimeRangeFieldSlotProps extends PickerFieldUISlotProps {}

package/modern/SingleInputTimeRangeField/index.d.ts

@@ -0,0 +1,3 @@
+export { SingleInputTimeRangeField } from "./SingleInputTimeRangeField.js";
+export { useSingleInputTimeRangeField as unstable_useSingleInputTimeRangeField } from "./useSingleInputTimeRangeField.js";
+export type { UseSingleInputTimeRangeFieldProps, SingleInputTimeRangeFieldProps } from './SingleInputTimeRangeField.types';

package/modern/SingleInputTimeRangeField/useSingleInputTimeRangeField.d.ts

@@ -0,0 +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" | "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/StaticDateRangePicker/StaticDateRangePicker.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { StaticDateRangePickerProps } from "./StaticDateRangePicker.types.js";
+type StaticDateRangePickerComponent = ((props: StaticDateRangePickerProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [StaticDateRangePicker API](https://mui.com/x/api/date-pickers/static-date-range-picker/)
+ */
+declare const StaticDateRangePicker: StaticDateRangePickerComponent;
+export { StaticDateRangePicker };

package/modern/StaticDateRangePicker/StaticDateRangePicker.types.d.ts

@@ -0,0 +1,22 @@
+import { MakeOptional } from '@mui/x-internals/types';
+import { StaticRangeOnlyPickerProps, UseStaticRangePickerSlots, UseStaticRangePickerSlotProps } from "../internals/hooks/useStaticRangePicker/index.js";
+import { BaseDateRangePickerProps, BaseDateRangePickerSlots, BaseDateRangePickerSlotProps } from "../DateRangePicker/shared.js";
+export interface StaticDateRangePickerSlots extends BaseDateRangePickerSlots, UseStaticRangePickerSlots {}
+export interface StaticDateRangePickerSlotProps extends BaseDateRangePickerSlotProps, Omit<UseStaticRangePickerSlotProps, 'toolbar'> {}
+export interface StaticDateRangePickerProps extends BaseDateRangePickerProps, MakeOptional<StaticRangeOnlyPickerProps, 'displayStaticWrapperAs'> {
+  /**
+   * The number of calendars to render.
+   * @default 1 if `displayStaticWrapperAs === 'mobile'`, 2 otherwise.
+   */
+  calendars?: 1 | 2 | 3;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: StaticDateRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: StaticDateRangePickerSlotProps;
+}

package/modern/StaticDateRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { StaticDateRangePicker } from "./StaticDateRangePicker.js";
+export type { StaticDateRangePickerProps, StaticDateRangePickerSlots, StaticDateRangePickerSlotProps } from './StaticDateRangePicker.types';

package/modern/dateRangeViewRenderers/dateRangeViewRenderers.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
+import { DateRangeCalendarProps } from "../DateRangeCalendar/index.js";
+export interface DateRangeViewRendererProps<TView extends DateOrTimeViewWithMeridiem> extends Omit<DateRangeCalendarProps, 'views' | 'onRangePositionChange' | 'rangePosition' | 'defaultRangePosition'> {
+  views: readonly TView[];
+}
+/**
+ * We don't pass all the props down to `DateRangeCalendar`,
+ * because otherwise some unwanted props would be passed to the HTML element.
+ */
+export declare const renderDateRangeViewCalendar: ({
+  views,
+  view,
+  onViewChange,
+  focusedView,
+  onFocusedViewChange,
+  value,
+  defaultValue,
+  referenceDate,
+  onChange,
+  className,
+  classes,
+  disableFuture,
+  disablePast,
+  minDate,
+  maxDate,
+  shouldDisableDate,
+  reduceAnimations,
+  onMonthChange,
+  calendars,
+  currentMonthCalendarPosition,
+  slots,
+  slotProps,
+  loading,
+  renderLoading,
+  disableHighlightToday,
+  readOnly,
+  disabled,
+  showDaysOutsideCurrentMonth,
+  dayOfWeekFormatter,
+  disableAutoMonthSwitching,
+  sx,
+  autoFocus,
+  fixedWeekNumber,
+  disableDragEditing,
+  displayWeekNumber,
+  timezone,
+  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/dateRangeViewRenderers/index.d.ts

@@ -0,0 +1,2 @@
+export { renderDateRangeViewCalendar } from "./dateRangeViewRenderers.js";
+export type { DateRangeViewRendererProps } from './dateRangeViewRenderers';

package/modern/hooks/index.d.ts

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

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

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

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

@@ -0,0 +1,72 @@
+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:
+ *
+ * ```tsx
+ * import Box from '@mui/material/Box';
+ * import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
+ * import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
+ * import { useDateRangeManager } from '@mui/x-date-pickers-pro/managers';
+ *
+ * function MultiInputField(props) {
+ *   const manager = useDateRangeManager();
+ *   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
+ *   const response = useMultiInputRangeField({
+ *     manager,
+ *     internalProps,
+ *     startTextFieldProps: {},
+ *     endTextFieldProps: {},
+ *     rootProps: forwardedProps,
+ *   });
+ *
+ *   return (
+ *     <Box {...response.root}>
+ *       <PickersTextField {...response.startTextField} />
+ *       <span>{' – '}</span>
+ *       <PickersTextField {...response.endTextField} />
+ *     </Box>
+ *   );
+ * }
+ * ```
+ *
+ * @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 {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, TTextFieldProps extends UseTextFieldBaseForwardedProps, TRootProps extends {
+  [key: string]: any;
+}>(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>;
+  rootProps: TRootProps;
+  startTextFieldProps: TTextFieldProps;
+  endTextFieldProps: TTextFieldProps;
+}
+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;
+};