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

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { PickerRangeValue, PickerValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+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 {}
+export interface UseMultiInputFieldSelectedSectionsResponseItem {
+  unstableFieldRef?: React.Ref<FieldRef<PickerValue>>;
+  selectedSections: FieldSelectedSections;
+  onSelectedSectionsChange: (newSelectedSections: FieldSelectedSections) => void;
+}
+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 {};

package/modern/hooks/useMultiInputRangeField/useTextFieldProps.js

@@ -0,0 +1,141 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["clearable", "onClear", "openPickerAriaLabel"];
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { useDateManager, useDateTimeManager, useTimeManager } from '@mui/x-date-pickers/managers';
+import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
+import { useField, useFieldInternalPropsWithDefaults, useNullableFieldPrivateContext, useNullablePickerContext, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
+import { useNullablePickerRangePositionContext } from "../../internals/hooks/useNullablePickerRangePositionContext.js";
+/**
+ * @ignore - internal hook.
+ */
+export function useTextFieldProps(parameters) {
+  const pickerContext = useNullablePickerContext();
+  const fieldPrivateContext = useNullableFieldPrivateContext();
+  const pickerPrivateContext = usePickerPrivateContext();
+  const rangePositionContext = useNullablePickerRangePositionContext();
+  const rangePosition = rangePositionContext?.rangePosition ?? 'start';
+  const setRangePosition = rangePositionContext?.setRangePosition;
+  const previousRangePosition = React.useRef(rangePosition);
+  const {
+    forwardedProps,
+    sharedInternalProps,
+    selectedSectionProps,
+    valueType,
+    position,
+    value,
+    onChange,
+    autoFocus,
+    validation
+  } = parameters;
+  let useManager;
+  switch (valueType) {
+    case 'date':
+      {
+        useManager = useDateManager;
+        break;
+      }
+    case 'time':
+      {
+        useManager = useTimeManager;
+        break;
+      }
+    case 'date-time':
+      {
+        useManager = useDateTimeManager;
+        break;
+      }
+    default:
+      {
+        throw new Error(`Unknown valueType: ${valueType}`);
+      }
+  }
+  const manager = useManager({
+    enableAccessibleFieldDOMStructure: sharedInternalProps.enableAccessibleFieldDOMStructure
+  });
+  const openPickerIfPossible = event => {
+    if (!pickerContext) {
+      return;
+    }
+    setRangePosition?.(position);
+    if (pickerContext.triggerStatus === 'enabled') {
+      event.preventDefault();
+      pickerContext.setOpen(true);
+    }
+  };
+  const handleKeyDown = useEventCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      openPickerIfPossible(event);
+    }
+  });
+
+  // Registering `onClick` listener on the root element as well to correctly handle cases where user is clicking on `label`
+  // which has `pointer-events: none` and due to DOM structure the `input` does not catch the click event
+  const handleClick = useEventCallback(event => {
+    openPickerIfPossible(event);
+  });
+  const handleFocus = useEventCallback(event => {
+    forwardedProps.onFocus?.(event);
+    if (pickerContext?.open) {
+      setRangePosition?.(position);
+      if (previousRangePosition.current !== position && pickerContext.initialView) {
+        pickerContext.setView?.(pickerContext.initialView);
+      }
+    }
+  });
+  const handleChange = useEventCallback((newSingleValue, rawContext) => {
+    const newRange = position === 'start' ? [newSingleValue, value[1]] : [value[0], newSingleValue];
+    const context = _extends({}, rawContext, {
+      validationError: validation.getValidationErrorForNewValue(newRange)
+    });
+    onChange(newRange, context);
+  });
+  const allProps = _extends({
+    value: position === 'start' ? value[0] : value[1],
+    error: position === 'start' ? !!validation.validationError[0] : !!validation.validationError[1],
+    id: `${pickerPrivateContext.labelId}-${position}`,
+    autoFocus: position === 'start' ? autoFocus : undefined
+  }, forwardedProps, sharedInternalProps, selectedSectionProps, {
+    onClick: handleClick,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown,
+    onChange: handleChange
+  });
+  const splittedProps = useSplitFieldProps(allProps, valueType);
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps: splittedProps.internalProps,
+    skipContextFieldRefAssignment: rangePosition !== position
+  });
+  const _ref = useField({
+      forwardedProps: splittedProps.forwardedProps,
+      internalProps: internalPropsWithDefaults,
+      valueManager: manager.internal_valueManager,
+      fieldValueManager: manager.internal_fieldValueManager,
+      validator: manager.validator,
+      valueType: manager.valueType,
+      // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
+      getOpenPickerButtonAriaLabel: () => ''
+    }),
+    fieldResponse = _objectWithoutPropertiesLoose(_ref, _excluded);
+  React.useEffect(() => {
+    if (!pickerContext?.open || pickerContext?.variant === 'mobile') {
+      return;
+    }
+    fieldPrivateContext?.fieldRef.current?.focusField();
+    if (!fieldPrivateContext?.fieldRef.current || pickerContext.view === pickerContext.initialView) {
+      // could happen when the user is switching between the inputs
+      previousRangePosition.current = rangePosition;
+      return;
+    }
+
+    // bring back focus to the field
+    // currentView is present on DateTimeRangePicker
+    fieldPrivateContext?.fieldRef.current.setSelectedSections(
+    // use the current view or `0` when the range position has just been swapped
+    previousRangePosition.current === rangePosition ? pickerContext.view : 0);
+    previousRangePosition.current = rangePosition;
+  }, [rangePosition, pickerContext?.open, pickerContext?.variant, pickerContext?.initialView, pickerContext?.view, fieldPrivateContext?.fieldRef]);
+  return fieldResponse;
+}

package/modern/hooks/usePickerRangePositionContext.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { UseRangePositionResponse } from "../internals/hooks/useRangePosition.js";
+export declare const PickerRangePositionContext: React.Context<UseRangePositionResponse | null>;
+/**
+ * Returns information about the range position of the picker that wraps the current component.
+ */
+export declare function usePickerRangePositionContext(): UseRangePositionResponse;

package/modern/index.d.ts

@@ -0,0 +1,22 @@
+export * from '@mui/x-date-pickers';
+export * from "./DateRangePickerDay/index.js";
+export * from "./MultiInputDateRangeField/index.js";
+export * from "./MultiInputTimeRangeField/index.js";
+export * from "./MultiInputDateTimeRangeField/index.js";
+export * from "./SingleInputDateRangeField/index.js";
+export * from "./SingleInputTimeRangeField/index.js";
+export * from "./SingleInputDateTimeRangeField/index.js";
+export * from "./DateRangeCalendar/index.js";
+export * from "./PickersRangeCalendarHeader/index.js";
+export * from "./DateRangePicker/index.js";
+export * from "./DesktopDateRangePicker/index.js";
+export * from "./MobileDateRangePicker/index.js";
+export * from "./StaticDateRangePicker/index.js";
+export * from "./DateTimeRangePicker/index.js";
+export * from "./DesktopDateTimeRangePicker/index.js";
+export * from "./MobileDateTimeRangePicker/index.js";
+export * from "./dateRangeViewRenderers/index.js";
+export * from "./models/index.js";
+export * from "./hooks/index.js";
+export * from "./validation/index.js";
+export * from "./managers/index.js";

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v8.0.0-alpha.11
+ * @mui/x-date-pickers-pro v8.0.0-alpha.13
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/internals/constants/dimensions.d.ts

@@ -0,0 +1,3 @@
+export { DAY_MARGIN } from '@mui/x-date-pickers/internals';
+export declare const DAY_RANGE_SIZE = 40;
+export declare const RANGE_VIEW_HEIGHT: number;

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

@@ -0,0 +1 @@
+export type { RangeOnlyPickerProps, UseRangePickerProps, UseRangePickerParams } from './useRangePicker';

package/modern/internals/hooks/models/useRangePicker.d.ts

@@ -0,0 +1,8 @@
+import { UsePickerParams, BasePickerProps, UsePickerViewsProps, UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps, DateOrTimeViewWithMeridiem, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { BaseRangeNonStaticPickerProps } from "../../models/index.js";
+import { UseRangePositionProps } from "../useRangePosition.js";
+export interface RangeOnlyPickerProps extends UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps, BaseRangeNonStaticPickerProps, UseRangePositionProps {}
+export interface UseRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<any, TView, any>> extends RangeOnlyPickerProps, BasePickerProps<PickerRangeValue, TView, TError, TExternalProps> {}
+export interface UseRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseRangePickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParams<PickerRangeValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' | 'ref'> {
+  props: TExternalProps;
+}

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

@@ -0,0 +1,2 @@
+export { useDesktopRangePicker } from "./useDesktopRangePicker.js";
+export type { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, DesktopRangeOnlyPickerProps, UseDesktopRangePickerProps } from './useDesktopRangePicker.types';

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

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

package/modern/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

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

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

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

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