@mui/x-date-pickers-pro 8.0.0-alpha.9 → 8.0.0-beta.0

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

@@ -0,0 +1,35 @@
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickerFieldSlotProps, PickerOwnerState } from '@mui/x-date-pickers/models';
+import { PickerPopperSlots, PickerPopperSlotProps, UsePickerProps, DateOrTimeViewWithMeridiem, PickerRangeValue, PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from '@mui/x-date-pickers/internals';
+import { ExportedPickersLayoutSlotProps, ExportedPickersLayoutSlots } from '@mui/x-date-pickers/PickersLayout';
+import { RangeOnlyPickerProps, UseRangePickerParams, UseRangePickerProps } from "../models/useRangePicker.js";
+export interface UseDesktopRangePickerSlots extends PickerPopperSlots, ExportedPickersLayoutSlots<PickerRangeValue>, PickerFieldUISlotsFromContext {
+  /**
+   * Component used to enter the date with the keyboard.
+   */
+  field: React.ElementType;
+}
+export interface UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickerPopperSlotProps, ExportedPickersLayoutSlotProps<PickerRangeValue>, PickerFieldUISlotPropsFromContext {
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure> & {
+    dateSeparator?: string;
+  }, {}, PickerOwnerState>;
+}
+export interface DesktopRangeOnlyPickerProps extends RangeOnlyPickerProps {
+  /**
+   * If `true`, the start `input` element is focused during the first mount.
+   */
+  autoFocus?: boolean;
+}
+export interface UseDesktopRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerProps<PickerRangeValue, TView, TError, any>> extends UseRangePickerProps<TView, TError, TExternalProps> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: UseDesktopRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+}
+export interface UseDesktopRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends UseRangePickerParams<TView, TExternalProps> {}

package/modern/internals/hooks/useMobileRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { useMobileRangePicker } from "./useMobileRangePicker.js";
+export type { UseMobileRangePickerSlots, UseMobileRangePickerSlotProps, MobileRangeOnlyPickerProps, UseMobileRangePickerProps } from './useMobileRangePicker.types';

package/modern/internals/hooks/useMobileRangePicker/useMobileRangePicker.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
+import { UseMobileRangePickerParams, UseMobileRangePickerProps } from "./useMobileRangePicker.types.js";
+export declare const useMobileRangePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({
+  props,
+  ...pickerParams
+}: UseMobileRangePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
+  renderPicker: () => React.JSX.Element;
+};

package/modern/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -1,17 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["props"];
+const _excluded = ["props"],
+  _excluded2 = ["ownerState"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
+import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { useLicenseVerifier } from '@mui/x-license';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
 import { usePicker, PickersModalDialog, PickerProvider, PickerFieldUIContextProvider } from '@mui/x-date-pickers/internals';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
-import useId from '@mui/utils/useId';
-import { useEnrichedRangePickerField } from "../useEnrichedRangePickerField.js";
 import { getReleaseInfo } from "../../utils/releaseInfo.js";
 import { useRangePosition } from "../useRangePosition.js";
 import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
+import { getRangeFieldType } from "../../utils/date-fields-utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
 export const useMobileRangePicker = _ref => {
@@ -23,30 +24,13 @@ export const useMobileRangePicker = _ref => {
   const {
     slots,
     slotProps: innerSlotProps,
-    className,
-    sx,
     label,
     inputRef,
-    name,
-    readOnly,
-    disableOpenPicker,
     localeText
   } = props;
-  const startFieldRef = React.useRef(null);
-  const endFieldRef = React.useRef(null);
-  const singleInputFieldRef = React.useRef(null);
-  const fieldType = slots.field.fieldType ?? 'multi-input';
-  const rangePositionResponse = useRangePosition(props, fieldType === 'single-input' ? singleInputFieldRef : undefined);
-  const labelId = useId();
+  const fieldType = getRangeFieldType(slots.field);
+  const rangePositionResponse = useRangePosition(props);
   const contextTranslations = usePickerTranslations();
-  let fieldRef;
-  if (fieldType === 'single-input') {
-    fieldRef = singleInputFieldRef;
-  } else if (rangePositionResponse.rangePosition === 'start') {
-    fieldRef = startFieldRef;
-  } else {
-    fieldRef = endFieldRef;
-  }
   const {
     providerProps,
     renderCurrentView,
@@ -55,48 +39,21 @@ export const useMobileRangePicker = _ref => {
     props,
     variant: 'mobile',
     autoFocusView: true,
-    fieldRef,
+    viewContainerRole: 'dialog',
     localeText
   }));
-
-  // Temporary hack to hide the opening button on the range pickers until we have migrate them to the new opening logic.
-  providerProps.contextValue.triggerStatus = 'hidden';
+  const labelId = providerProps.privateContextValue.labelId;
+  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const Field = slots.field;
-  const fieldProps = useSlotProps({
-    elementType: Field,
-    externalSlotProps: innerSlotProps?.field,
-    additionalProps: _extends({
-      // Internal props
-      readOnly: readOnly ?? true,
-      // Forwarded props
-      className,
-      sx
-    }, fieldType === 'single-input' && !!inputRef && {
-      inputRef
-    }, fieldType === 'single-input' && {
-      name
+  const _useSlotProps = useSlotProps({
+      elementType: Field,
+      externalSlotProps: innerSlotProps?.field,
+      additionalProps: _extends({}, fieldType === 'single-input' && isToolbarHidden && {
+        id: labelId
+      }),
+      ownerState
     }),
-    ownerState
-  });
-  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
-  const enrichedFieldResponse = useEnrichedRangePickerField(_extends({
-    variant: 'mobile',
-    fieldType,
-    // These direct access to `providerProps` will go away once the range fields handle the picker opening
-    contextValue: providerProps.contextValue,
-    fieldPrivateContextValue: providerProps.fieldPrivateContextValue,
-    readOnly,
-    labelId,
-    disableOpenPicker,
-    label,
-    localeText,
-    pickerSlots: slots,
-    pickerSlotProps: innerSlotProps,
-    fieldProps,
-    startFieldRef,
-    endFieldRef,
-    singleInputFieldRef
-  }, rangePositionResponse));
+    fieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
   const Layout = slots?.layout ?? PickersLayout;
   const finalLocaleText = _extends({}, contextTranslations, localeText);
   let labelledById = pickerParams.valueType === 'date-time' ? `${labelId}-start-toolbar ${labelId}-end-toolbar` : labelId;
@@ -121,16 +78,21 @@ export const useMobileRangePicker = _ref => {
     mobilePaper: _extends({
       'aria-labelledby': labelledById
     }, innerSlotProps?.mobilePaper)
+  }, fieldType === 'multi-input' && {
+    textField: slotOwnerState => {
+      return _extends({}, resolveComponentProps(innerSlotProps?.textField, slotOwnerState), {
+        id: `${labelId}-${slotOwnerState.position}`
+      });
+    }
   });
   const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-    // This override will go away once the range fields handle the picker opening
-    fieldPrivateContextValue: _extends({}, providerProps.fieldPrivateContextValue, enrichedFieldResponse.fieldPrivateContextValue),
     children: /*#__PURE__*/_jsx(PickerFieldUIContextProvider, {
       slots: slots,
       slotProps: slotProps,
+      inputRef: inputRef,
       children: /*#__PURE__*/_jsxs(PickerRangePositionContext.Provider, {
         value: rangePositionResponse,
-        children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldResponse.fieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
+        children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
           slots: slots,
           slotProps: slotProps,
           children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {

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

@@ -0,0 +1,31 @@
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickerFieldSlotProps, PickerOwnerState } from '@mui/x-date-pickers/models';
+import { PickersModalDialogSlots, PickersModalDialogSlotProps, UsePickerProps, DateOrTimeViewWithMeridiem, PickerRangeValue, PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from '@mui/x-date-pickers/internals';
+import { ExportedPickersLayoutSlotProps, ExportedPickersLayoutSlots, PickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout';
+import { RangeOnlyPickerProps, UseRangePickerParams, UseRangePickerProps } from "../models/useRangePicker.js";
+export interface UseMobileRangePickerSlots extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerRangeValue>, PickerFieldUISlotsFromContext {
+  /**
+   * Component used to enter the date with the keyboard.
+   */
+  field: React.ElementType;
+}
+export interface ExportedUseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerRangeValue>, PickerFieldUISlotPropsFromContext {
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure> & {
+    dateSeparator?: string;
+  }, {}, PickerOwnerState>;
+}
+export interface UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerRangeValue>, 'toolbar'> {}
+export interface MobileRangeOnlyPickerProps extends RangeOnlyPickerProps {}
+export interface UseMobileRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerProps<PickerRangeValue, TView, TError, any>> extends UseRangePickerProps<TView, TError, TExternalProps> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: UseMobileRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+}
+export interface UseMobileRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends UseRangePickerParams<TView, TExternalProps> {}

package/modern/internals/hooks/useNullablePickerRangePositionContext.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns information about the range position of the picker that wraps the current component.
+ * If no picker wraps the current component, returns `null`.
+ */
+export declare function useNullablePickerRangePositionContext(): import("./useRangePosition").UseRangePositionResponse | null;

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

@@ -0,0 +1,24 @@
+import { RangePosition } from "../../models/index.js";
+export interface UseRangePositionProps {
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition?: RangePosition;
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition?: RangePosition;
+  /**
+   * Callback fired when the range position changes.
+   * @param {RangePosition} rangePosition The new range position.
+   */
+  onRangePositionChange?: (rangePosition: RangePosition) => void;
+}
+export interface UseRangePositionResponse {
+  rangePosition: RangePosition;
+  setRangePosition: (newPosition: RangePosition) => void;
+}
+export declare const useRangePosition: (props: UseRangePositionProps) => UseRangePositionResponse;

package/modern/internals/hooks/useRangePosition.js

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

package/modern/internals/hooks/useStaticRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { useStaticRangePicker } from "./useStaticRangePicker.js";
+export type { UseStaticRangePickerSlots, UseStaticRangePickerSlotProps, StaticRangeOnlyPickerProps } from './useStaticRangePicker.types';

package/modern/internals/hooks/useStaticRangePicker/useStaticRangePicker.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
+import { UseStaticRangePickerParams, UseStaticRangePickerProps } from "./useStaticRangePicker.types.js";
+/**
+ * Hook managing all the range static pickers:
+ * - StaticDateRangePicker
+ */
+export declare const useStaticRangePicker: <TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>>({
+  props,
+  ...pickerParams
+}: UseStaticRangePickerParams<TView, TExternalProps>) => {
+  renderPicker: () => React.JSX.Element;
+};

package/modern/internals/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["props", "ref"];
+const _excluded = ["props"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
-import { usePicker, DIALOG_WIDTH, PickerProvider } from '@mui/x-date-pickers/internals';
+import { usePicker, DIALOG_WIDTH, PickerProvider, mergeSx } from '@mui/x-date-pickers/internals';
 import { useRangePosition } from "../useRangePosition.js";
 import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -23,16 +23,13 @@ const PickerStaticLayout = styled(PickersLayout)(({
  */
 export const useStaticRangePicker = _ref => {
   let {
-      props,
-      ref
+      props
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     localeText,
     slots,
     slotProps,
-    className,
-    sx,
     displayStaticWrapperAs,
     autoFocus
   } = props;
@@ -42,10 +39,10 @@ export const useStaticRangePicker = _ref => {
     renderCurrentView
   } = usePicker(_extends({}, pickerParams, {
     props,
+    variant: displayStaticWrapperAs,
     autoFocusView: autoFocus ?? false,
-    fieldRef: undefined,
-    localeText,
-    variant: displayStaticWrapperAs
+    viewContainerRole: null,
+    localeText
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const renderPicker = () => /*#__PURE__*/_jsx(PickerRangePositionContext.Provider, {
@@ -54,9 +51,9 @@ export const useStaticRangePicker = _ref => {
       children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
         slots: slots,
         slotProps: slotProps,
-        sx: [...(Array.isArray(sx) ? sx : [sx]), ...(Array.isArray(slotProps?.layout?.sx) ? slotProps.layout.sx : [slotProps?.layout?.sx])],
-        className: clsx(className, slotProps?.layout?.className),
-        ref: ref,
+        sx: mergeSx(providerProps.contextValue.rootSx, slotProps?.layout?.sx),
+        className: clsx(providerProps.contextValue.rootClassName, slotProps?.layout?.className),
+        ref: providerProps.contextValue.rootRef,
         children: renderCurrentView()
       }))
     }))

package/modern/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.d.ts

@@ -0,0 +1,23 @@
+import { BasePickerProps, UsePickerParameters, ExportedBaseToolbarProps, StaticOnlyPickerProps, DateOrTimeViewWithMeridiem, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout';
+import { UseRangePositionProps } from "../useRangePosition.js";
+export interface UseStaticRangePickerSlots extends ExportedPickersLayoutSlots<PickerRangeValue> {}
+export interface UseStaticRangePickerSlotProps extends ExportedPickersLayoutSlotProps<PickerRangeValue> {
+  toolbar?: ExportedBaseToolbarProps;
+}
+export interface StaticRangeOnlyPickerProps extends StaticOnlyPickerProps, UseRangePositionProps {}
+export interface UseStaticRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>> extends BasePickerProps<PickerRangeValue, TView, TError, TExternalProps>, StaticRangeOnlyPickerProps {
+  /**
+   * Overridable components.
+   * @default {}
+   */
+  slots?: UseStaticRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: UseStaticRangePickerSlotProps;
+}
+export interface UseStaticRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParameters<PickerRangeValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
+  props: TExternalProps;
+}

package/modern/internals/models/dateRange.d.ts

@@ -0,0 +1,16 @@
+import { PickerValidDate } from '@mui/x-date-pickers/models';
+/**
+ * Props used to validate a day value in range pickers.
+ */
+export interface DayRangeValidationProps {
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   *
+   * @param {PickerValidDate} day The date to test.
+   * @param {string} position The date to test, 'start' or 'end'.
+   * @returns {boolean} Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: PickerValidDate, position: 'start' | 'end') => boolean;
+}

package/modern/internals/models/dateTimeRange.d.ts

@@ -0,0 +1,3 @@
+import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
+export type DateTimeRangePickerView = Exclude<DateOrTimeViewWithMeridiem, 'month' | 'year'>;
+export type DateTimeRangePickerViewExternal = Exclude<DateTimeRangePickerView, 'meridiem'>;

package/modern/internals/models/fields.d.ts

@@ -0,0 +1,22 @@
+import { SlotComponentProps } from '@mui/utils';
+import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
+import type { MultiInputFieldRefs, MultiInputFieldSlotRootProps, RangePosition } from '../../models';
+/**
+ * Props the multi input field can receive when used inside a picker.
+ * Only contains what the MUI components are passing to the field, not what users can pass using the `props.slotProps.field`.
+ */
+export interface BaseMultiInputFieldProps extends Pick<UseFieldInternalProps<PickerRangeValue, boolean, unknown>, 'readOnly' | 'autoFocus'>, MultiInputFieldRefs {
+  slots?: {
+    root?: React.ElementType;
+    separator?: React.ElementType;
+    textField?: React.ElementType;
+  };
+  slotProps?: {
+    root?: SlotComponentProps<React.ElementType<MultiInputFieldSlotRootProps>, {}, FieldOwnerState>;
+    textField?: SlotComponentProps<typeof PickersTextField, {}, FieldOwnerState & {
+      position?: RangePosition;
+    }>;
+  };
+}

package/modern/internals/models/index.d.ts

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

package/modern/internals/models/managers.d.ts

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

package/modern/internals/models/rangePickerProps.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+/**
+ * Props common to all range non-static pickers.
+ * These props are handled by the headless wrappers.
+ */
+export interface BaseRangeNonStaticPickerProps {
+  /**
+   * The label content.
+   * Ignored if the field has several inputs.
+   */
+  label?: React.ReactNode;
+  /**
+   * Pass a ref to the `input` element.
+   * Ignored if the field has several inputs.
+   */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /**
+   * Name attribute used by the `input` element in the Field.
+   * Ignored if the field has several inputs.
+   */
+  name?: string;
+}

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

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

package/modern/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js

@@ -11,15 +11,18 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useSlotProps from '@mui/utils/useSlotProps';
-import { cleanFieldResponse, useFieldOwnerState } from '@mui/x-date-pickers/internals';
+import useForkRef from '@mui/utils/useForkRef';
+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,
   name,
-  getUtilityClass
+  getUtilityClass,
+  allowTriggerShifting
 }) {
   const useUtilityClasses = classes => {
     const slots = {
@@ -32,7 +35,7 @@ export function createMultiInputRangeField({
     ref: ref,
     spacing: 2,
     direction: "row",
-    alignItems: "center"
+    alignItems: "baseline"
   }, props))), {
     name,
     slot: 'Root',
@@ -51,14 +54,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,
@@ -68,40 +76,36 @@ export function createMultiInputRangeField({
       otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
     const classes = useUtilityClasses(classesProp);
     const ownerState = useFieldOwnerState(internalProps);
+    const handleRef = useForkRef(ref, pickerContext?.rootRef);
     const Root = slots?.root ?? MultiInputRangeFieldRoot;
     const rootProps = useSlotProps({
       elementType: Root,
       externalSlotProps: slotProps?.root,
       externalForwardedProps: otherForwardedProps,
       additionalProps: {
-        ref
+        ref: handleRef
       },
       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',
+      allowTriggerShifting
     });
-    const endTextFieldProps = useSlotProps({
-      elementType: PickersTextField,
-      externalSlotProps: slotProps?.textField,
-      ownerState: _extends({}, ownerState, {
-        position: 'end'
-      })
+    const endTextFieldProps = useTextFieldProps({
+      slotProps,
+      ownerState,
+      position: 'end',
+      allowTriggerShifting
     });
-    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({
@@ -113,19 +117,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';