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

package/modern/AdapterDateFnsV2/AdapterDateFnsV2.js

@@ -1,49 +1,51 @@
-/* eslint-disable class-methods-use-this */
+// date-fns@<3 has no exports field defined
+// See https://github.com/date-fns/date-fns/issues/1781
+/* eslint-disable import/extensions, class-methods-use-this */
 // @ts-nocheck
-import addDays from 'date-fns/addDays';
-import addSeconds from 'date-fns/addSeconds';
-import addMinutes from 'date-fns/addMinutes';
-import addHours from 'date-fns/addHours';
-import addWeeks from 'date-fns/addWeeks';
-import addMonths from 'date-fns/addMonths';
-import addYears from 'date-fns/addYears';
-import endOfDay from 'date-fns/endOfDay';
-import endOfWeek from 'date-fns/endOfWeek';
-import endOfYear from 'date-fns/endOfYear';
-import dateFnsFormat from 'date-fns/format';
-import getDate from 'date-fns/getDate';
-import getDaysInMonth from 'date-fns/getDaysInMonth';
-import getHours from 'date-fns/getHours';
-import getMinutes from 'date-fns/getMinutes';
-import getMonth from 'date-fns/getMonth';
-import getSeconds from 'date-fns/getSeconds';
-import getMilliseconds from 'date-fns/getMilliseconds';
-import getWeek from 'date-fns/getWeek';
-import getYear from 'date-fns/getYear';
-import isAfter from 'date-fns/isAfter';
-import isBefore from 'date-fns/isBefore';
-import isEqual from 'date-fns/isEqual';
-import isSameDay from 'date-fns/isSameDay';
-import isSameYear from 'date-fns/isSameYear';
-import isSameMonth from 'date-fns/isSameMonth';
-import isSameHour from 'date-fns/isSameHour';
-import isValid from 'date-fns/isValid';
-import dateFnsParse from 'date-fns/parse';
-import setDate from 'date-fns/setDate';
-import setHours from 'date-fns/setHours';
-import setMinutes from 'date-fns/setMinutes';
-import setMonth from 'date-fns/setMonth';
-import setSeconds from 'date-fns/setSeconds';
-import setMilliseconds from 'date-fns/setMilliseconds';
-import setYear from 'date-fns/setYear';
-import startOfDay from 'date-fns/startOfDay';
-import startOfMonth from 'date-fns/startOfMonth';
-import endOfMonth from 'date-fns/endOfMonth';
-import startOfWeek from 'date-fns/startOfWeek';
-import startOfYear from 'date-fns/startOfYear';
-import isWithinInterval from 'date-fns/isWithinInterval';
-import defaultLocale from 'date-fns/locale/en-US';
-import longFormatters from 'date-fns/_lib/format/longFormatters';
+import addDays from 'date-fns/addDays/index.js';
+import addSeconds from 'date-fns/addSeconds/index.js';
+import addMinutes from 'date-fns/addMinutes/index.js';
+import addHours from 'date-fns/addHours/index.js';
+import addWeeks from 'date-fns/addWeeks/index.js';
+import addMonths from 'date-fns/addMonths/index.js';
+import addYears from 'date-fns/addYears/index.js';
+import endOfDay from 'date-fns/endOfDay/index.js';
+import endOfWeek from 'date-fns/endOfWeek/index.js';
+import endOfYear from 'date-fns/endOfYear/index.js';
+import dateFnsFormat from 'date-fns/format/index.js';
+import getDate from 'date-fns/getDate/index.js';
+import getDaysInMonth from 'date-fns/getDaysInMonth/index.js';
+import getHours from 'date-fns/getHours/index.js';
+import getMinutes from 'date-fns/getMinutes/index.js';
+import getMonth from 'date-fns/getMonth/index.js';
+import getSeconds from 'date-fns/getSeconds/index.js';
+import getMilliseconds from 'date-fns/getMilliseconds/index.js';
+import getWeek from 'date-fns/getWeek/index.js';
+import getYear from 'date-fns/getYear/index.js';
+import isAfter from 'date-fns/isAfter/index.js';
+import isBefore from 'date-fns/isBefore/index.js';
+import isEqual from 'date-fns/isEqual/index.js';
+import isSameDay from 'date-fns/isSameDay/index.js';
+import isSameYear from 'date-fns/isSameYear/index.js';
+import isSameMonth from 'date-fns/isSameMonth/index.js';
+import isSameHour from 'date-fns/isSameHour/index.js';
+import isValid from 'date-fns/isValid/index.js';
+import dateFnsParse from 'date-fns/parse/index.js';
+import setDate from 'date-fns/setDate/index.js';
+import setHours from 'date-fns/setHours/index.js';
+import setMinutes from 'date-fns/setMinutes/index.js';
+import setMonth from 'date-fns/setMonth/index.js';
+import setSeconds from 'date-fns/setSeconds/index.js';
+import setMilliseconds from 'date-fns/setMilliseconds/index.js';
+import setYear from 'date-fns/setYear/index.js';
+import startOfDay from 'date-fns/startOfDay/index.js';
+import startOfMonth from 'date-fns/startOfMonth/index.js';
+import endOfMonth from 'date-fns/endOfMonth/index.js';
+import startOfWeek from 'date-fns/startOfWeek/index.js';
+import startOfYear from 'date-fns/startOfYear/index.js';
+import isWithinInterval from 'date-fns/isWithinInterval/index.js';
+import defaultLocale from 'date-fns/locale/en-US/index.js';
+import longFormatters from 'date-fns/_lib/format/longFormatters/index.js';
 import { AdapterDateFnsBase } from "../AdapterDateFnsBase/index.js";
 /**
  * Based on `@date-io/date-fns`

package/modern/AdapterDayjs/AdapterDayjs.js

@@ -1,11 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 /* eslint-disable class-methods-use-this */
 import defaultDayjs from 'dayjs';
-import weekOfYearPlugin from 'dayjs/plugin/weekOfYear';
-import customParseFormatPlugin from 'dayjs/plugin/customParseFormat';
-import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
-import isBetweenPlugin from 'dayjs/plugin/isBetween';
-import advancedFormatPlugin from 'dayjs/plugin/advancedFormat';
+// dayjs has no exports field defined
+// See https://github.com/iamkun/dayjs/issues/2562
+/* eslint-disable import/extensions */
+import weekOfYearPlugin from 'dayjs/plugin/weekOfYear.js';
+import customParseFormatPlugin from 'dayjs/plugin/customParseFormat.js';
+import localizedFormatPlugin from 'dayjs/plugin/localizedFormat.js';
+import isBetweenPlugin from 'dayjs/plugin/isBetween.js';
+import advancedFormatPlugin from 'dayjs/plugin/advancedFormat.js';
+/* eslint-enable import/extensions */
 import { warnOnce } from '@mui/x-internals/warning';
 defaultDayjs.extend(localizedFormatPlugin);
 defaultDayjs.extend(weekOfYearPlugin);

package/modern/DateCalendar/DateCalendar.js

@@ -344,6 +344,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
           referenceDate: referenceDate
         })), view === 'day' && /*#__PURE__*/_jsx(DayCalendar, _extends({}, calendarState, baseDateValidationProps, commonViewProps, {
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
+          hasFocus: hasFocus,
           onFocusedDayChange: focusedDate => setVisibleDate({
             target: focusedDate,
             reason: 'cell-interaction'
@@ -354,7 +355,6 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
           shouldDisableDate: shouldDisableDate,
           shouldDisableMonth: shouldDisableMonth,
           shouldDisableYear: shouldDisableYear,
-          hasFocus: hasFocus,
           onFocusedViewChange: isViewFocused => setFocusedView('day', isViewFocused),
           showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
           fixedWeekNumber: fixedWeekNumber,

package/modern/DateField/useDateField.d.ts

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

package/modern/DatePicker/DatePicker.types.d.ts

@@ -1,5 +1,5 @@
 import { DesktopDatePickerProps, DesktopDatePickerSlots, DesktopDatePickerSlotProps } from "../DesktopDatePicker/index.js";
-import { BaseSingleInputFieldProps, PickerValue } from "../internals/models/index.js";
+import { BaseSingleInputFieldProps } from "../internals/models/index.js";
 import { MobileDatePickerProps, MobileDatePickerSlots, MobileDatePickerSlotProps } from "../MobileDatePicker/index.js";
 import { ValidateDateProps } from "../validation/validateDate.js";
 export interface DatePickerSlots extends DesktopDatePickerSlots, MobileDatePickerSlots {}
@@ -35,4 +35,4 @@ export interface DatePickerProps<TEnableAccessibleFieldDOMStructure extends bool
 /**
  * Props the field can receive when used inside a date picker (<DatePicker />, <DesktopDatePicker /> or <MobileDatePicker /> component).
  */
-export type DatePickerFieldProps = ValidateDateProps & BaseSingleInputFieldProps<PickerValue>;
+export type DatePickerFieldProps = ValidateDateProps & BaseSingleInputFieldProps;

package/modern/DateTimeField/useDateTimeField.d.ts

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

package/modern/DateTimePicker/DateTimePicker.types.d.ts

@@ -1,5 +1,5 @@
 import { DesktopDateTimePickerProps, DesktopDateTimePickerSlots, DesktopDateTimePickerSlotProps } from "../DesktopDateTimePicker/index.js";
-import { BaseSingleInputFieldProps, DateOrTimeViewWithMeridiem, PickerValue } from "../internals/models/index.js";
+import { BaseSingleInputFieldProps, DateOrTimeViewWithMeridiem } from "../internals/models/index.js";
 import { MobileDateTimePickerProps, MobileDateTimePickerSlots, MobileDateTimePickerSlotProps } from "../MobileDateTimePicker/index.js";
 import { ValidateDateTimeProps } from "../validation/index.js";
 import { ExportedYearCalendarProps } from "../YearCalendar/YearCalendar.types.js";
@@ -31,4 +31,4 @@ export interface DateTimePickerProps<TEnableAccessibleFieldDOMStructure extends
 /**
  * Props the field can receive when used inside a date time picker (<DateTimePicker />, <DesktopDateTimePicker /> or <MobileDateTimePicker /> component).
  */
-export type DateTimePickerFieldProps = ValidateDateTimeProps & BaseSingleInputFieldProps<PickerValue>;
+export type DateTimePickerFieldProps = ValidateDateTimeProps & BaseSingleInputFieldProps;

package/modern/TimeClock/Clock.js

@@ -104,7 +104,7 @@ const ClockPin = styled('div', {
   left: '50%',
   transform: 'translate(-50%, -50%)'
 }));
-const meridiemButtonCommonStyles = (theme, meridiemMode) => ({
+const meridiemButtonCommonStyles = (theme, clockMeridiemMode) => ({
   zIndex: 1,
   bottom: 8,
   paddingLeft: 4,
@@ -112,7 +112,7 @@ const meridiemButtonCommonStyles = (theme, meridiemMode) => ({
   width: CLOCK_HOUR_WIDTH,
   variants: [{
     props: {
-      meridiemMode
+      clockMeridiemMode
     },
     style: {
       backgroundColor: (theme.vars || theme).palette.primary.main,

package/modern/TimeClock/ClockPointer.js

@@ -58,7 +58,7 @@ const ClockPointerThumb = styled('div', {
   boxSizing: 'content-box',
   variants: [{
     props: {
-      isBetweenTwoClockValues: false
+      isClockPointerBetweenTwoValues: false
     },
     style: {
       backgroundColor: (theme.vars || theme).palette.primary.main

package/modern/TimeField/useTimeField.d.ts

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

package/modern/TimePicker/TimePicker.types.d.ts

@@ -1,5 +1,5 @@
 import { DesktopTimePickerProps, DesktopTimePickerSlots, DesktopTimePickerSlotProps } from "../DesktopTimePicker/index.js";
-import { BaseSingleInputFieldProps, PickerValue, TimeViewWithMeridiem } from "../internals/models/index.js";
+import { BaseSingleInputFieldProps, TimeViewWithMeridiem } from "../internals/models/index.js";
 import { MobileTimePickerProps, MobileTimePickerSlots, MobileTimePickerSlotProps } from "../MobileTimePicker/index.js";
 import { ValidateTimeProps } from "../validation/validateTime.js";
 export interface TimePickerSlots extends DesktopTimePickerSlots, MobileTimePickerSlots {}
@@ -25,4 +25,4 @@ export interface TimePickerProps<TEnableAccessibleFieldDOMStructure extends bool
 /**
  * Props the field can receive when used inside a time picker (<TimePicker />, <DesktopTimePicker /> or <MobileTimePicker /> component).
  */
-export type TimePickerFieldProps = ValidateTimeProps & BaseSingleInputFieldProps<PickerValue>;
+export type TimePickerFieldProps = ValidateTimeProps & BaseSingleInputFieldProps;

package/modern/hooks/useSplitFieldProps.d.ts

@@ -1,6 +1,6 @@
 import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from "../validation/extractValidationProps.js";
 import { PickerValueType } from "../models/common.js";
-declare const SHARED_FIELD_INTERNAL_PROP_NAMES: readonly ["value", "defaultValue", "referenceDate", "format", "formatDensity", "onChange", "timezone", "onError", "shouldRespectLeadingZeros", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef", "unstableStartFieldRef", "unstableEndFieldRef", "enableAccessibleFieldDOMStructure", "disabled", "readOnly", "dateSeparator", "autoFocus"];
+declare const SHARED_FIELD_INTERNAL_PROP_NAMES: readonly ["value", "defaultValue", "referenceDate", "format", "formatDensity", "onChange", "timezone", "onError", "shouldRespectLeadingZeros", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef", "unstableStartFieldRef", "unstableEndFieldRef", "enableAccessibleFieldDOMStructure", "disabled", "readOnly", "dateSeparator", "autoFocus", "focused"];
 type InternalPropNames<TValueType extends PickerValueType> = (typeof SHARED_FIELD_INTERNAL_PROP_NAMES)[number] | (TValueType extends 'date' | 'date-time' ? (typeof DATE_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'time' | 'date-time' ? (typeof TIME_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'date-time' ? (typeof DATE_TIME_VALIDATION_PROP_NAMES)[number] : never);
 /**
  * Split the props received by the field component into:

package/modern/hooks/useSplitFieldProps.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from "../validation/extractValidationProps.js";
-const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef', 'unstableStartFieldRef', 'unstableEndFieldRef', 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly', 'dateSeparator', 'autoFocus'];
+const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef', 'unstableStartFieldRef', 'unstableEndFieldRef', 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly', 'dateSeparator', 'autoFocus', 'focused'];
 /**
  * Split the props received by the field component into:
  * - `internalProps` which are used by the various hooks called by the field component.

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.0.0-alpha.12
+ * @mui/x-date-pickers v8.0.0-alpha.13
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/components/PickerFieldUI.d.ts

@@ -17,6 +17,7 @@ export declare const cleanFieldResponse: <TFieldResponse extends MakeOptional<Us
   openPickerAriaLabel: string;
   textFieldProps: TextFieldProps | PickersTextFieldProps;
 };
+export declare const PickerFieldUIContext: React.Context<PickerFieldUIContextValue>;
 /**
  * Adds the button to open the picker and the button to clear the value of the field.
  * @ignore - internal component.
@@ -111,6 +112,12 @@ export interface PickerFieldUISlotPropsFromContext extends PickerFieldUISlotProp
 interface FieldInputAdornmentOwnerState extends FieldOwnerState {
   position: 'start' | 'end';
 }
+interface PickerFieldUIContextValue {
+  inputRef: React.Ref<HTMLInputElement> | undefined;
+  slots: PickerFieldUISlotsFromContext;
+  slotProps: PickerFieldUISlotPropsFromContext;
+}
+export declare function mergeSlotProps<TProps extends {}, TOwnerState extends FieldOwnerState>(slotPropsA: SlotComponentPropsFromProps<TProps, {}, TOwnerState> | undefined, slotPropsB: SlotComponentPropsFromProps<TProps, {}, TOwnerState> | undefined): Partial<TProps> | ((ownerState: TOwnerState) => {}) | undefined;
 /**
  * The `textField` slot props cannot be handled inside `PickerFieldUI` because it would be a breaking change to not pass the enriched props to `useField`.
  * Once the non-accessible DOM structure will be removed, we will be able to remove the `textField` slot and clean this logic.

package/modern/internals/components/PickerFieldUI.js

@@ -85,7 +85,7 @@ export const cleanFieldResponse = _ref => {
     })
   };
 };
-const PickerFieldUIContext = /*#__PURE__*/React.createContext({
+export const PickerFieldUIContext = /*#__PURE__*/React.createContext({
   slots: {},
   slotProps: {},
   inputRef: undefined
@@ -234,7 +234,7 @@ export function PickerFieldUI(props) {
   }
   return /*#__PURE__*/_jsx(TextField, _extends({}, textFieldProps));
 }
-function mergeSlotProps(slotPropsA, slotPropsB) {
+export function mergeSlotProps(slotPropsA, slotPropsB) {
   if (!slotPropsA) {
     return slotPropsB;
   }

package/modern/internals/components/PickerPopper/PickerPopper.d.ts

@@ -60,10 +60,7 @@ export interface ExportedPickerPopperProps {
   placement?: MuiPopperProps['placement'];
 }
 export interface PickerPopperProps extends ExportedPickerPopperProps {
-  role: 'tooltip' | 'dialog';
-  containerRef?: React.Ref<HTMLDivElement>;
   children?: React.ReactNode;
-  onBlur?: () => void;
   slots?: PickerPopperSlots;
   slotProps?: PickerPopperSlotProps;
 }

package/modern/internals/components/PickerPopper/PickerPopper.js

@@ -11,7 +11,7 @@ import BaseFocusTrap from '@mui/material/Unstable_TrapFocus';
 import { unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback, unstable_ownerDocument as ownerDocument, unstable_composeClasses as composeClasses } from '@mui/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { getPickerPopperUtilityClass } from "./pickerPopperClasses.js";
-import { getActiveElement } from "../../utils/utils.js";
+import { executeInTheNextEventLoopTick, getActiveElement } from "../../utils/utils.js";
 import { usePickerPrivateContext } from "../../hooks/usePickerPrivateContext.js";
 import { usePickerContext } from "../../../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -206,9 +206,6 @@ export function PickerPopper(inProps) {
   });
   const {
     children,
-    containerRef = null,
-    onBlur,
-    role,
     placement = 'bottom-start',
     slots,
     slotProps,
@@ -217,11 +214,13 @@ export function PickerPopper(inProps) {
   const {
     open,
     triggerRef,
+    popupRef,
     reduceAnimations
   } = usePickerContext();
   const {
     dismissViews,
-    doesTheCurrentViewHasAnUI
+    doesTheCurrentViewHasAnUI,
+    viewContainerRole
   } = usePickerPrivateContext();
   React.useEffect(() => {
     function handleKeyDown(nativeEvent) {
@@ -236,7 +235,7 @@ export function PickerPopper(inProps) {
   }, [dismissViews, open]);
   const lastFocusedElementRef = React.useRef(null);
   React.useEffect(() => {
-    if (role === 'tooltip' || !doesTheCurrentViewHasAnUI()) {
+    if (viewContainerRole === 'tooltip' || !doesTheCurrentViewHasAnUI()) {
       return;
     }
     if (open) {
@@ -250,18 +249,31 @@ export function PickerPopper(inProps) {
         }
       });
     }
-  }, [open, role, doesTheCurrentViewHasAnUI]);
-  const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, onBlur ?? dismissViews);
-  const paperRef = React.useRef(null);
-  const handleRef = useForkRef(paperRef, containerRef);
-  const handlePaperRef = useForkRef(handleRef, clickAwayRef);
+  }, [open, viewContainerRole, doesTheCurrentViewHasAnUI]);
   const classes = useUtilityClasses(classesProp);
   const {
-    ownerState: pickerOwnerState
+    ownerState: pickerOwnerState,
+    rootRefObject
   } = usePickerPrivateContext();
   const ownerState = _extends({}, pickerOwnerState, {
     popperPlacement: placement
   });
+  const handleClickAway = useEventCallback(() => {
+    if (viewContainerRole === 'tooltip') {
+      executeInTheNextEventLoopTick(() => {
+        if (rootRefObject.current?.contains(getActiveElement(document)) || popupRef.current?.contains(getActiveElement(document))) {
+          return;
+        }
+        dismissViews();
+      });
+    } else {
+      dismissViews();
+    }
+  });
+  const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, handleClickAway);
+  const paperRef = React.useRef(null);
+  const handleRef = useForkRef(paperRef, popupRef);
+  const handlePaperRef = useForkRef(handleRef, clickAwayRef);
   const handleKeyDown = event => {
     if (event.key === 'Escape') {
       // stop the propagation to avoid closing parent modal
@@ -278,7 +290,7 @@ export function PickerPopper(inProps) {
     externalSlotProps: slotProps?.popper,
     additionalProps: {
       transition: true,
-      role,
+      role: viewContainerRole == null ? undefined : viewContainerRole,
       open,
       placement,
       anchorEl: triggerRef.current,
@@ -298,7 +310,7 @@ export function PickerPopper(inProps) {
       // which would force screen readers to read too old label
       ,
       disableRestoreFocus: true,
-      disableEnforceFocus: role === 'tooltip',
+      disableEnforceFocus: viewContainerRole === 'tooltip',
       isEnabled: () => true
     }, slotProps?.desktopTrapFocus, {
       children: /*#__PURE__*/_jsx(Transition, _extends({}, TransitionProps, slotProps?.desktopTransition, {

package/modern/internals/components/PickerProvider.d.ts

@@ -6,7 +6,7 @@ import { PickersInputLocaleText } from "../../locales/index.js";
 import { DateOrTimeViewWithMeridiem, PickerOrientation, PickerValidValue, PickerVariant } from "../models/index.js";
 import type { UsePickerValueActionsContextValue, UsePickerValueContextValue, UsePickerValuePrivateContextValue } from '../hooks/usePicker/usePickerValue.types';
 import { UsePickerViewsActionsContextValue, UsePickerViewsContextValue, UsePickerViewsPrivateContextValue } from "../hooks/usePicker/usePickerViews.js";
-import { PickerFieldPrivateContextValue } from "../hooks/useField/useFieldInternalPropsWithDefaults.js";
+import { PickerFieldPrivateContextValue } from "../hooks/useNullableFieldPrivateContext.js";
 export declare const PickerActionsContext: React.Context<PickerActionsContextValue<any, any, any> | null>;
 export declare const PickerPrivateContext: React.Context<PickerPrivateContextValue>;
 /**
@@ -35,6 +35,12 @@ export interface PickerContextValue<TValue extends PickerValidValue, TView exten
    * Whether the picker is read-only.
    */
   readOnly: boolean;
+  /**
+   * Whether the picker should be focused on mount.
+   * If the picker has a field and is not open, the field should be focused.
+   * If the picker does not have a field (if it is a static picker) or is not open, the view should be focused.
+   */
+  autoFocus: boolean;
   /**
    * The responsive variant of the picker.
    * It is equal to "desktop" when using a desktop picker (like <DesktopDatePicker />).
@@ -68,6 +74,11 @@ export interface PickerContextValue<TValue extends PickerValidValue, TView exten
    * If it is "enabled", the field should render an interactive UI to open the Picker.
    */
   triggerStatus: 'hidden' | 'disabled' | 'enabled';
+  /**
+   * The ref to attach to the popup's outermost element that contains the view, if any.
+   * When using a built-in popup component, this property is automatically attached to the appropriate element.
+   */
+  popupRef: React.RefObject<any>;
   /**
    * The format to use when rendering the value in the field.
    * It is equal to the picker `format` prop if defined.
@@ -117,4 +128,13 @@ export interface PickerPrivateContextValue extends UsePickerValuePrivateContextV
    * The ownerState of the picker.
    */
   ownerState: PickerOwnerState;
+  /**
+   * The ref of the root element.
+   * This is the object counterpart of the `usePickerContext().rootRef` property which can be a function.
+   */
+  rootRefObject: React.RefObject<HTMLDivElement | null>;
+  /**
+   * The id of the label element.
+   */
+  labelId: string | undefined;
 }

package/modern/internals/components/PickerProvider.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { LocalizationProvider } from "../../LocalizationProvider/index.js";
 import { IsValidValueContext } from "../../hooks/useIsValidValue.js";
-import { PickerFieldPrivateContext } from "../hooks/useField/useFieldInternalPropsWithDefaults.js";
+import { PickerFieldPrivateContext } from "../hooks/useNullableFieldPrivateContext.js";
 import { PickerContext } from "../../hooks/usePickerContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const PickerActionsContext = /*#__PURE__*/React.createContext(null);
@@ -16,7 +16,12 @@ export const PickerPrivateContext = /*#__PURE__*/React.createContext({
   },
   dismissViews: () => {},
   hasUIView: true,
-  doesTheCurrentViewHasAnUI: () => true
+  doesTheCurrentViewHasAnUI: () => true,
+  rootRefObject: {
+    current: null
+  },
+  viewContainerRole: null,
+  labelId: undefined
 });
 
 /**

package/modern/internals/demo/DemoContainer.js

@@ -15,10 +15,10 @@ const getChildTypeFromChildName = childName => {
   if (childName.match(/^Static([A-Za-z]+)/) || childName.match(/^([A-Za-z]+)(Calendar|Clock)$/)) {
     return 'UI-view';
   }
-  if (childName.match(/^MultiInput([A-Za-z]+)RangeField$/) || childName.match(/^([A-Za-z]+)RangePicker$/)) {
+  if (childName.match(/^MultiInput([A-Za-z]+)RangeField$/)) {
     return 'multi-input-range-field';
   }
-  if (childName.match(/^SingleInput([A-Za-z]+)RangeField$/)) {
+  if (childName.match(/^SingleInput([A-Za-z]+)RangeField$/) || childName.match(/^([A-Za-z]+)RangePicker$/)) {
     return 'single-input-range-field';
   }
   return 'single-input-field';
@@ -133,7 +133,7 @@ export function DemoContainer(props) {
           minWidth: {
             xs: 300,
             // If demo also contains MultiInputDateTimeRangeField, increase width to avoid cutting off the value.
-            md: childrenTypes.has('multi-input-range-field') ? 460 : 400
+            md: childrenTypes.has('multi-input-range-field') ? 460 : 440
           }
         }
       };

package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -4,8 +4,6 @@ const _excluded = ["props"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
-import useForkRef from '@mui/utils/useForkRef';
-import useId from '@mui/utils/useId';
 import { PickerPopper } from "../../components/PickerPopper/PickerPopper.js";
 import { usePicker } from "../usePicker/index.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
@@ -29,35 +27,26 @@ export const useDesktopPicker = _ref => {
     slotProps: innerSlotProps,
     label,
     inputRef,
-    readOnly,
-    autoFocus,
     localeText
   } = props;
-  const fieldRef = React.useRef(null);
-  const labelId = useId();
-  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
     providerProps,
     renderCurrentView,
     ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
-    fieldRef,
     localeText,
     autoFocusView: true,
+    viewContainerRole: 'dialog',
     variant: 'desktop'
   }));
+  const labelId = providerProps.privateContextValue.labelId;
+  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const Field = slots.field;
   const _useSlotProps = useSlotProps({
       elementType: Field,
       externalSlotProps: innerSlotProps?.field,
-      additionalProps: _extends({
-        // Internal props
-        readOnly,
-        autoFocus: autoFocus && !props.open,
-        // Forwarded props
-        focused: providerProps.contextValue.open ? true : undefined
-      }, isToolbarHidden && {
+      additionalProps: _extends({}, isToolbarHidden && {
         id: labelId
       }),
       ownerState
@@ -80,18 +69,12 @@ export const useDesktopPicker = _ref => {
       'aria-labelledby': labelledById
     }, innerSlotProps?.popper)
   });
-
-  // TODO: This `as any` will go away once the field ref is handled by the context.
-  const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
   const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
     children: /*#__PURE__*/_jsxs(PickerFieldUIContextProvider, {
       slots: slots,
       slotProps: slotProps,
       inputRef: inputRef,
-      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
-        unstableFieldRef: handleFieldRef
-      })), /*#__PURE__*/_jsx(PickerPopper, {
-        role: "dialog",
+      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps)), /*#__PURE__*/_jsx(PickerPopper, {
         slots: slots,
         slotProps: slotProps,
         children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {

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

@@ -15,11 +15,6 @@ export interface UseDesktopPickerSlots extends Pick<PickerPopperSlots, 'desktopP
    * Component used to enter the date with the keyboard.
    */
   field: React.ElementType;
-  /**
-   * Form control with an input to render the value inside the default field.
-   * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
-   */
-  textField?: React.ElementType;
 }
 export interface ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickerPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
   field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;

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

@@ -1,5 +1,4 @@
 export { useField } from "./useField.js";
 export type { FieldValueManager, UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldChangeHandler, FieldChangeHandlerContext } from './useField.types';
 export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";
-export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";
-export type { PickerFieldPrivateContextValue } from './useFieldInternalPropsWithDefaults';
+export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";