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

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -10,15 +10,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveComponentProps"));
 var _xLicense = require("@mui/x-license");
 var _PickersLayout = require("@mui/x-date-pickers/PickersLayout");
 var _internals = require("@mui/x-date-pickers/internals");
 var _hooks = require("@mui/x-date-pickers/hooks");
-var _useId = _interopRequireDefault(require("@mui/utils/useId"));
-var _useEnrichedRangePickerField = require("../useEnrichedRangePickerField");
 var _releaseInfo = require("../../utils/releaseInfo");
 var _useRangePosition = require("../useRangePosition");
 var _usePickerRangePositionContext = require("../../../hooks/usePickerRangePositionContext");
+var _dateFieldsUtils = require("../../utils/date-fields-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["props"],
   _excluded2 = ["ownerState"];
@@ -34,25 +34,11 @@ 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 = (0, _useRangePosition.useRangePosition)(props, fieldType === 'single-input' ? singleInputFieldRef : undefined);
-  const labelId = (0, _useId.default)();
+  const fieldType = (0, _dateFieldsUtils.getRangeFieldType)(slots.field);
+  const rangePositionResponse = (0, _useRangePosition.useRangePosition)(props);
   const contextTranslations = (0, _hooks.usePickerTranslations)();
-  let fieldRef;
-  if (fieldType === 'single-input') {
-    fieldRef = singleInputFieldRef;
-  } else if (rangePositionResponse.rangePosition === 'start') {
-    fieldRef = startFieldRef;
-  } else {
-    fieldRef = endFieldRef;
-  }
   const {
     providerProps,
     renderCurrentView,
@@ -61,41 +47,21 @@ 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 = (0, _useSlotProps2.default)({
       elementType: Field,
       externalSlotProps: innerSlotProps?.field,
-      additionalProps: {
-        // Internal props
-        readOnly: readOnly ?? true
-      },
+      additionalProps: (0, _extends2.default)({}, fieldType === 'single-input' && isToolbarHidden && {
+        id: labelId
+      }),
       ownerState
     }),
     fieldProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
-  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
-  const enrichedFieldResponse = (0, _useEnrichedRangePickerField.useEnrichedRangePickerField)((0, _extends2.default)({
-    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.PickersLayout;
   const finalLocaleText = (0, _extends2.default)({}, contextTranslations, localeText);
   let labelledById = pickerParams.valueType === 'date-time' ? `${labelId}-start-toolbar ${labelId}-end-toolbar` : labelId;
@@ -120,17 +86,21 @@ const useMobileRangePicker = _ref => {
     mobilePaper: (0, _extends2.default)({
       'aria-labelledby': labelledById
     }, innerSlotProps?.mobilePaper)
+  }, fieldType === 'multi-input' && {
+    textField: slotOwnerState => {
+      return (0, _extends2.default)({}, (0, _resolveComponentProps.default)(innerSlotProps?.textField, slotOwnerState), {
+        id: `${labelId}-${slotOwnerState.position}`
+      });
+    }
   });
   const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerProvider, (0, _extends2.default)({}, providerProps, {
-    // This override will go away once the range fields handle the picker opening
-    fieldPrivateContextValue: (0, _extends2.default)({}, providerProps.fieldPrivateContextValue, enrichedFieldResponse.fieldPrivateContextValue),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerFieldUIContextProvider, {
       slots: slots,
       slotProps: slotProps,
       inputRef: inputRef,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_usePickerRangePositionContext.PickerRangePositionContext.Provider, {
         value: rangePositionResponse,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, enrichedFieldResponse.fieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickersModalDialog, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickersModalDialog, {
           slots: slots,
           slotProps: slotProps,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {

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

@@ -1,9 +1,22 @@
-import { PickersModalDialogSlots, PickersModalDialogSlotProps, UsePickerViewsProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
-import { RangeOnlyPickerProps, UseRangePickerParams, UseRangePickerProps, UseRangePickerSlotProps, UseRangePickerSlots } from "../models/useRangePicker.js";
-export interface UseMobileRangePickerSlots extends UseRangePickerSlots, PickersModalDialogSlots {}
-export interface UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, PickersModalDialogSlotProps {}
+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 UsePickerViewsProps<any, TView, any>> extends UseRangePickerProps<TView, TError, TExternalProps> {
+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 {}

package/internals/hooks/useRangePosition.d.ts

@@ -1,6 +1,3 @@
-import * as React from 'react';
-import { FieldRef } from '@mui/x-date-pickers/models';
-import { PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { RangePosition } from "../../models/index.js";
 export interface UseRangePositionProps {
   /**
@@ -24,4 +21,4 @@ export interface UseRangePositionResponse {
   rangePosition: RangePosition;
   setRangePosition: (newPosition: RangePosition) => void;
 }
-export declare const useRangePosition: (props: UseRangePositionProps, singleInputFieldRef?: React.RefObject<FieldRef<PickerRangeValue> | null>) => UseRangePositionResponse;
+export declare const useRangePosition: (props: UseRangePositionProps) => UseRangePositionResponse;

package/internals/hooks/useRangePosition.js

@@ -7,33 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.useRangePosition = void 0;
 var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-const useRangePosition = (props, singleInputFieldRef) => {
+const useRangePosition = props => {
   const [rangePosition, setRangePosition] = (0, _useControlled.default)({
     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;
-    const activeSectionIndex = singleInputFieldRef.current.getActiveSectionIndex();
-    // if the active section is already within the target range, we don't need to update it.
-    if (activeSectionIndex && activeSectionIndex >= targetActiveSectionIndex && activeSectionIndex < targetActiveSectionIndex + sections.length / 2) {
-      return;
-    }
-    singleInputFieldRef.current.setSelectedSections(targetActiveSectionIndex);
-  };
   const handleRangePositionChange = (0, _useEventCallback.default)(newRangePosition => {
     setRangePosition(newRangePosition);
     props.onRangePositionChange?.(newRangePosition);
-    syncRangePositionWithSingleInputField(newRangePosition);
   });
   return {
     rangePosition,

package/internals/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -47,10 +47,10 @@ const useStaticRangePicker = _ref => {
     renderCurrentView
   } = (0, _internals.usePicker)((0, _extends2.default)({}, pickerParams, {
     props,
+    variant: displayStaticWrapperAs,
     autoFocusView: autoFocus ?? false,
-    fieldRef: undefined,
-    localeText,
-    variant: displayStaticWrapperAs
+    viewContainerRole: null,
+    localeText
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_usePickerRangePositionContext.PickerRangePositionContext.Provider, {

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

@@ -1,4 +1,4 @@
-import { BasePickerProps, UsePickerParams, ExportedBaseToolbarProps, StaticOnlyPickerProps, DateOrTimeViewWithMeridiem, PickerRangeValue } from '@mui/x-date-pickers/internals';
+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> {}
@@ -18,6 +18,6 @@ export interface UseStaticRangePickerProps<TView extends DateOrTimeViewWithMerid
    */
   slotProps?: UseStaticRangePickerSlotProps;
 }
-export interface UseStaticRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParams<PickerRangeValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
+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/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js

@@ -22,6 +22,7 @@ var _internals = require("@mui/x-date-pickers/internals");
 var _hooks = require("@mui/x-date-pickers/hooks");
 var _PickersTextField = require("@mui/x-date-pickers/PickersTextField");
 var _useMultiInputRangeField = require("../../../hooks/useMultiInputRangeField");
+var _useTextFieldProps = require("./useTextFieldProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "className", "classes"];
 function createMultiInputRangeField({
@@ -59,14 +60,19 @@ function createMultiInputRangeField({
       // eslint-disable-next-line material-ui/mui-name-matches-component-name
       name
     });
+    const pickerFieldUIContext = React.useContext(_internals.PickerFieldUIContext);
+    const pickerContext = (0, _internals.useNullablePickerContext)();
     const manager = useManager({
       enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure,
       dateSeparator: props.dateSeparator
     });
     const {
-      internalProps,
+      internalProps: rawInternalProps,
       forwardedProps
     } = (0, _hooks.useSplitFieldProps)(themeProps, manager.valueType);
+    const internalProps = pickerContext?.variant === 'mobile' ? (0, _extends2.default)({}, rawInternalProps, {
+      readOnly: true
+    }) : rawInternalProps;
     const {
         slots,
         slotProps,
@@ -76,7 +82,6 @@ function createMultiInputRangeField({
       otherForwardedProps = (0, _objectWithoutPropertiesLoose2.default)(forwardedProps, _excluded);
     const classes = useUtilityClasses(classesProp);
     const ownerState = (0, _internals.useFieldOwnerState)(internalProps);
-    const pickerContext = (0, _internals.useNullablePickerContext)();
     const handleRef = (0, _useForkRef.default)(ref, pickerContext?.rootRef);
     const Root = slots?.root ?? MultiInputRangeFieldRoot;
     const rootProps = (0, _useSlotProps.default)({
@@ -89,29 +94,22 @@ function createMultiInputRangeField({
       ownerState,
       className: (0, _clsx.default)(className, classes.root)
     });
-    const startTextFieldProps = (0, _useSlotProps.default)({
-      elementType: _PickersTextField.PickersTextField,
-      externalSlotProps: slotProps?.textField,
-      ownerState: (0, _extends2.default)({}, ownerState, {
-        position: 'start'
-      })
+    const startTextFieldProps = (0, _useTextFieldProps.useTextFieldProps)({
+      slotProps,
+      ownerState,
+      position: 'start'
     });
-    const endTextFieldProps = (0, _useSlotProps.default)({
-      elementType: _PickersTextField.PickersTextField,
-      externalSlotProps: slotProps?.textField,
-      ownerState: (0, _extends2.default)({}, ownerState, {
-        position: 'end'
-      })
+    const endTextFieldProps = (0, _useTextFieldProps.useTextFieldProps)({
+      slotProps,
+      ownerState,
+      position: 'end'
     });
-    const {
-      startDate,
-      endDate,
-      enableAccessibleFieldDOMStructure
-    } = (0, _useMultiInputRangeField.useMultiInputRangeField)({
+    const fieldResponse = (0, _useMultiInputRangeField.useMultiInputRangeField)({
       manager,
       internalProps,
-      startForwardedProps: startTextFieldProps,
-      endForwardedProps: endTextFieldProps
+      rootProps,
+      startTextFieldProps,
+      endTextFieldProps
     });
     const Separator = slots?.separator ?? MultiInputRangeFieldSeparator;
     const separatorProps = (0, _useSlotProps.default)({
@@ -123,19 +121,15 @@ function createMultiInputRangeField({
       ownerState,
       className: classes.separator
     });
-    const {
-      textFieldProps: startDateProps
-    } = (0, _internals.cleanFieldResponse)(startDate);
-    const {
-      textFieldProps: endDateProps
-    } = (0, _internals.cleanFieldResponse)(endDate);
-    const TextField = slots?.textField ?? (enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
+    const cleanStartTextFieldResponse = (0, _internals.cleanFieldResponse)(fieldResponse.startTextField);
+    const cleanEndTextFieldResponse = (0, _internals.cleanFieldResponse)(fieldResponse.endTextField);
+    const TextField = slots?.textField ?? pickerFieldUIContext.slots.textField ?? (fieldResponse.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, fieldResponse.root, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({
         fullWidth: true
-      }, startDateProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Separator, (0, _extends2.default)({}, separatorProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({
+      }, cleanStartTextFieldResponse.textFieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Separator, (0, _extends2.default)({}, separatorProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({
         fullWidth: true
-      }, endDateProps))]
+      }, cleanEndTextFieldResponse.textFieldProps))]
     }));
   });
   MultiInputRangeField.fieldType = 'multi-input';

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

@@ -7,7 +7,7 @@ import { FieldOwnerState } from '@mui/x-date-pickers/models';
 import { PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerFieldInternalProps } from '@mui/x-date-pickers/internals';
 import { FieldType, MultiInputFieldRefs, RangeFieldSeparatorProps, RangePosition } from "../../../models/index.js";
 import { PickerAnyRangeManager } from "../../models/managers.js";
-export type MultiInputRangeFieldProps<TManager extends PickerAnyRangeManager> = MultiInputFieldRefs & RangeFieldSeparatorProps & Omit<PickerManagerFieldInternalProps<TManager>, 'unstableFieldRef' | 'clearable' | 'onClear'> & Omit<StackProps, 'position' | keyof PickerManagerFieldInternalProps<TManager>> & {
+export type MultiInputRangeFieldProps<TManager extends PickerAnyRangeManager> = MultiInputFieldRefs & RangeFieldSeparatorProps & Omit<PickerManagerFieldInternalProps<TManager>, 'unstableFieldRef' | 'clearable' | 'onClear' | 'focused'> & Omit<StackProps, 'position' | keyof PickerManagerFieldInternalProps<TManager>> & {
   /**
    * If `true`, the field is focused during the first mount.
    * @default false

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

@@ -0,0 +1,12 @@
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { MultiInputRangeFieldSlotProps } from "./createMultiInputRangeField.types.js";
+export declare function useTextFieldProps({
+  slotProps,
+  ownerState,
+  position
+}: {
+  slotProps: MultiInputRangeFieldSlotProps | undefined;
+  ownerState: FieldOwnerState;
+  position: 'start' | 'end';
+}): PickersTextFieldProps;

package/internals/utils/createMultiInputRangeField/useTextFieldProps.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTextFieldProps = useTextFieldProps;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _PickersTextField = require("@mui/x-date-pickers/PickersTextField");
+var _hooks = require("@mui/x-date-pickers/hooks");
+var _internals = require("@mui/x-date-pickers/internals");
+var _useNullablePickerRangePositionContext = require("../../hooks/useNullablePickerRangePositionContext");
+function useTextFieldProps({
+  slotProps,
+  ownerState,
+  position
+}) {
+  const pickerContext = (0, _internals.useNullablePickerContext)();
+  const translations = (0, _hooks.usePickerTranslations)();
+  const pickerFieldUIContext = React.useContext(_internals.PickerFieldUIContext);
+  const rangePositionContext = (0, _useNullablePickerRangePositionContext.useNullablePickerRangePositionContext)();
+  const textFieldProps = (0, _useSlotProps.default)({
+    elementType: _PickersTextField.PickersTextField,
+    externalSlotProps: (0, _internals.mergeSlotProps)(pickerFieldUIContext.slotProps.textField, slotProps?.textField),
+    additionalProps: {
+      // TODO: Decide if we also want to set the default labels on standalone fields.
+      label: pickerContext ? translations[position] : undefined,
+      focused: pickerContext?.open ? rangePositionContext?.rangePosition === position : undefined
+    },
+    ownerState: (0, _extends2.default)({}, ownerState, {
+      position
+    })
+  });
+  if (!textFieldProps.InputProps) {
+    textFieldProps.InputProps = {};
+  }
+  if (pickerContext && position === 'start') {
+    textFieldProps.InputProps.ref = pickerContext.triggerRef;
+  }
+  return textFieldProps;
+}

package/internals/utils/date-fields-utils.d.ts

@@ -17,4 +17,7 @@ export declare const removeLastSeparator: (dateSections: FieldRangeSection[]) =>
   modified: boolean;
   startSeparator: string;
   endSeparator: string;
-})[];
+})[];
+export declare function getRangeFieldType(field: React.ElementType & {
+  fieldType?: 'single-input' | 'multi-input';
+}): "single-input" | "multi-input";

package/internals/utils/date-fields-utils.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getRangeFieldType = getRangeFieldType;
 exports.splitDateRangeSections = exports.removeLastSeparator = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const splitDateRangeSections = sections => {
@@ -30,4 +31,8 @@ const removeLastSeparator = dateSections => dateSections.map((section, sectionIn
   }
   return section;
 });
-exports.removeLastSeparator = removeLastSeparator;
+exports.removeLastSeparator = removeLastSeparator;
+function getRangeFieldType(field) {
+  const fieldType = field.fieldType ?? 'multi-input';
+  return fieldType;
+}

package/internals/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTczOTc0NjgwMDAwMA==";
+  const releaseInfo = "MTc0MTMwMjAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/internals/utils/valueManagers.js

@@ -59,16 +59,8 @@ const getRangeFieldValueManager = ({
     }
     return [prevReferenceValue[1], value[1]];
   },
-  getSectionsFromValue: (utils, [start, end], fallbackSections, getSectionsFromDate) => {
-    const separatedFallbackSections = fallbackSections == null ? {
-      startDate: null,
-      endDate: null
-    } : (0, _dateFieldsUtils.splitDateRangeSections)(fallbackSections);
-    const getSections = (newDate, fallbackDateSections, position) => {
-      const shouldReUsePrevDateSections = !utils.isValid(newDate) && !!fallbackDateSections;
-      if (shouldReUsePrevDateSections) {
-        return fallbackDateSections;
-      }
+  getSectionsFromValue: ([start, end], getSectionsFromDate) => {
+    const getSections = (newDate, position) => {
       const sections = getSectionsFromDate(newDate);
       return sections.map((section, sectionIndex) => {
         if (sectionIndex === sections.length - 1 && position === 'start') {
@@ -83,7 +75,7 @@ const getRangeFieldValueManager = ({
         });
       });
     };
-    return [...getSections(start, separatedFallbackSections.startDate, 'start'), ...getSections(end, separatedFallbackSections.endDate, 'end')];
+    return [...getSections(start, 'start'), ...getSections(end, 'end')];
   },
   getV7HiddenInputValueFromSections: sections => {
     const dateRangeSections = (0, _dateFieldsUtils.splitDateRangeSections)(sections);
@@ -103,24 +95,33 @@ const getRangeFieldValueManager = ({
       return parseDate(dateStr.trim(), referenceValue[index]);
     });
   },
-  getActiveDateManager: (utils, state, activeSection) => {
-    const index = activeSection.dateName === 'start' ? 0 : 1;
-    const updateDateInRange = (newDate, prevDateRange) => index === 0 ? [newDate, prevDateRange[1]] : [prevDateRange[0], newDate];
-    return {
-      date: state.value[index],
-      referenceDate: state.referenceValue[index],
-      getSections: sections => {
-        const dateRangeSections = (0, _dateFieldsUtils.splitDateRangeSections)(sections);
-        if (index === 0) {
-          return (0, _dateFieldsUtils.removeLastSeparator)(dateRangeSections.startDate);
-        }
-        return dateRangeSections.endDate;
-      },
-      getNewValuesFromNewActiveDate: newActiveDate => ({
-        value: updateDateInRange(newActiveDate, state.value),
-        referenceValue: !utils.isValid(newActiveDate) ? state.referenceValue : updateDateInRange(newActiveDate, state.referenceValue)
-      })
-    };
+  getDateFromSection: (value, activeSection) => value[getActiveDateIndex(activeSection)],
+  getDateSectionsFromValue: (sections, activeSection) => {
+    const dateRangeSections = (0, _dateFieldsUtils.splitDateRangeSections)(sections);
+    if (getActiveDateIndex(activeSection) === 0) {
+      return (0, _dateFieldsUtils.removeLastSeparator)(dateRangeSections.startDate);
+    }
+    return dateRangeSections.endDate;
+  },
+  updateDateInValue: (value, activeSection, activeDate) => {
+    if (getActiveDateIndex(activeSection) === 0) {
+      return [activeDate, value[1]];
+    }
+    return [value[0], activeDate];
+  },
+  clearDateSections: (sections, activeSection) => {
+    const dateRangeSections = (0, _dateFieldsUtils.splitDateRangeSections)(sections);
+    if (getActiveDateIndex(activeSection) === 0) {
+      return [...dateRangeSections.startDate.map(section => (0, _extends2.default)({}, section, {
+        value: ''
+      })), ...dateRangeSections.endDate];
+    }
+    return [...dateRangeSections.startDate, ...dateRangeSections.endDate.map(section => (0, _extends2.default)({}, section, {
+      value: ''
+    }))];
   }
 });
-exports.getRangeFieldValueManager = getRangeFieldValueManager;
+exports.getRangeFieldValueManager = getRangeFieldValueManager;
+function getActiveDateIndex(activeSection) {
+  return activeSection == null || activeSection.dateName === 'start' ? 0 : 1;
+}

package/managers/useDateRangeManager.d.ts

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

package/managers/useDateRangeManager.js

@@ -35,6 +35,13 @@ function useDateRangeManager(parameters = {}) {
       internalProps
     })),
     // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
-    internal_getOpenPickerButtonAriaLabel: () => ''
+    internal_getOpenPickerButtonAriaLabel: ({
+      value,
+      utils,
+      localeText
+    }) => {
+      const formattedValue = utils.isValid(value[0]) ? utils.format(value[0], 'fullDate') : null;
+      return localeText.openDatePickerDialogue(formattedValue);
+    }
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }

package/managers/useDateTimeRangeManager.d.ts

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

package/managers/useDateTimeRangeManager.js

@@ -35,6 +35,13 @@ function useDateTimeRangeManager(parameters = {}) {
       defaultDates
     })),
     // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
-    internal_getOpenPickerButtonAriaLabel: () => ''
+    internal_getOpenPickerButtonAriaLabel: ({
+      value,
+      utils,
+      localeText
+    }) => {
+      const formattedValue = utils.isValid(value[0]) ? utils.format(value[0], 'fullDate') : null;
+      return localeText.openDatePickerDialogue(formattedValue);
+    }
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }

package/managers/useTimeRangeManager.d.ts

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

package/managers/useTimeRangeManager.js

@@ -33,6 +33,15 @@ function useTimeRangeManager(parameters = {}) {
       internalProps
     })),
     // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
-    internal_getOpenPickerButtonAriaLabel: () => ''
+    internal_getOpenPickerButtonAriaLabel: ({
+      value,
+      utils,
+      localeText
+    }) => {
+      // TODO: Use ampm prop?
+      const ampm = utils.is12HourCycleInCurrentLocale();
+      const formattedValue = utils.isValid(value[0]) ? utils.format(value[0], ampm ? 'fullTime12h' : 'fullTime24h') : null;
+      return localeText.openTimePickerDialogue(formattedValue);
+    }
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }