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

package/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -12,8 +12,12 @@ import { useUtils } from "../internals/hooks/useUtils.js";
 import { extractValidationProps, validateDateTime } from "../validation/index.js";
 import { useMobilePicker } from "../internals/hooks/useMobilePicker/index.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
-import { renderTimeViewClock } from "../timeViewRenderers/index.js";
+import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from "../timeViewRenderers/index.js";
 import { resolveDateTimeFormat } from "../internals/utils/date-time-utils.js";
+import { DIALOG_WIDTH, VIEW_HEIGHT } from "../internals/constants/dimensions.js";
+import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from "../MultiSectionDigitalClock/index.js";
+import { mergeSx } from "../internals/utils/utils.js";
+import { digitalClockClasses } from "../DigitalClock/index.js";
 /**
  * Demos:
  *
@@ -29,20 +33,26 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiMobileDateTimePicker');
+  const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
   const viewRenderers = _extends({
     day: renderDateViewCalendar,
     month: renderDateViewCalendar,
     year: renderDateViewCalendar,
-    hours: renderTimeViewClock,
-    minutes: renderTimeViewClock,
-    seconds: renderTimeViewClock
+    hours: renderTimeView,
+    minutes: renderTimeView,
+    seconds: renderTimeView,
+    meridiem: renderTimeView
   }, defaultizedProps.viewRenderers);
   const ampmInClock = defaultizedProps.ampmInClock ?? false;
+  // Need to avoid adding the `meridiem` view when unexpected renderer is specified
+  const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name;
+  const views = !shouldHoursRendererContainMeridiemView ? defaultizedProps.views.filter(view => view !== 'meridiem') : defaultizedProps.views;
 
   // Props with the default values specific to the mobile variant
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
     format: resolveDateTimeFormat(utils, defaultizedProps),
+    views,
     ampmInClock,
     slots: _extends({
       field: DateTimeField
@@ -55,7 +65,30 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
       }, defaultizedProps.slotProps?.toolbar),
       tabs: _extends({
         hidden: false
-      }, defaultizedProps.slotProps?.tabs)
+      }, defaultizedProps.slotProps?.tabs),
+      layout: _extends({}, defaultizedProps.slotProps?.layout, {
+        sx: mergeSx([{
+          [`& .${multiSectionDigitalClockClasses.root}`]: {
+            width: DIALOG_WIDTH
+          },
+          [`& .${multiSectionDigitalClockSectionClasses.root}`]: {
+            flex: 1,
+            // account for the border on `MultiSectionDigitalClock`
+            maxHeight: VIEW_HEIGHT - 1,
+            [`.${multiSectionDigitalClockSectionClasses.item}`]: {
+              width: 'auto'
+            }
+          },
+          [`& .${digitalClockClasses.root}`]: {
+            width: DIALOG_WIDTH,
+            maxHeight: VIEW_HEIGHT,
+            flex: 1,
+            [`.${digitalClockClasses.item}`]: {
+              justifyContent: 'center'
+            }
+          }
+        }], defaultizedProps.slotProps?.layout?.sx)
+      })
     })
   });
   const {
@@ -292,7 +325,7 @@ MobileDateTimePicker.propTypes = {
    * Used when the component view is not controlled.
    * Must be a valid option from `views` list.
    */
-  openTo: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
+  openTo: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   /**
    * Force rendering in particular orientation.
    */
@@ -368,6 +401,11 @@ MobileDateTimePicker.propTypes = {
    * @default false
    */
   showDaysOutsideCurrentMonth: PropTypes.bool,
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -382,6 +420,22 @@ MobileDateTimePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn: PropTypes.number,
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * @default{ hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps: PropTypes.shape({
+    hours: PropTypes.number,
+    minutes: PropTypes.number,
+    seconds: PropTypes.number
+  }),
   /**
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
@@ -400,7 +454,7 @@ MobileDateTimePicker.propTypes = {
    * Used when the component view is controlled.
    * Must be a valid option from `views` list.
    */
-  view: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
+  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.
@@ -409,6 +463,7 @@ MobileDateTimePicker.propTypes = {
   viewRenderers: PropTypes.shape({
     day: PropTypes.func,
     hours: PropTypes.func,
+    meridiem: PropTypes.func,
     minutes: PropTypes.func,
     month: PropTypes.func,
     seconds: PropTypes.func,

package/modern/MobileDateTimePicker/MobileDateTimePicker.types.d.ts

@@ -1,11 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { UseMobilePickerSlots, ExportedUseMobilePickerSlotProps, MobileOnlyPickerProps } from "../internals/hooks/useMobilePicker/index.js";
 import { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlotProps } from "../DateTimePicker/shared.js";
-import { DateOrTimeView } from "../models/index.js";
-import { DateOrTimeViewWithMeridiem } from "../internals/models/index.js";
 export interface MobileDateTimePickerSlots extends BaseDateTimePickerSlots, MakeOptional<UseMobilePickerSlots, 'field'> {}
 export interface MobileDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimePickerSlotProps, ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
-export interface MobileDateTimePickerProps<TView extends DateOrTimeViewWithMeridiem = DateOrTimeView, TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimePickerProps<TView>, MobileOnlyPickerProps {
+export interface MobileDateTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimePickerProps, MobileOnlyPickerProps {
   /**
    * Overridable component slots.
    * @default {}

package/modern/PickersTextField/PickersTextField.js

@@ -154,7 +154,9 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
         label: label,
         name: name,
         role: "group",
-        "aria-labelledby": inputLabelId
+        "aria-labelledby": inputLabelId,
+        "aria-describedby": helperTextId,
+        "aria-live": helperTextId ? 'polite' : undefined
       }, InputProps)), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
         id: helperTextId
       }, FormHelperTextProps, {

package/modern/StaticDateTimePicker/StaticDateTimePicker.js

@@ -4,11 +4,15 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDateTimePickerDefaultizedProps } from "../DateTimePicker/shared.js";
-import { renderTimeViewClock } from "../timeViewRenderers/index.js";
+import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from "../timeViewRenderers/index.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useStaticPicker } from "../internals/hooks/useStaticPicker/index.js";
 import { validateDateTime } from "../validation/index.js";
+import { mergeSx } from "../internals/utils/utils.js";
+import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from "../MultiSectionDigitalClock/index.js";
+import { DIALOG_WIDTH, VIEW_HEIGHT } from "../internals/constants/dimensions.js";
+import { digitalClockClasses } from "../DigitalClock/index.js";
 /**
  * Demos:
  *
@@ -23,19 +27,26 @@ const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTi
   const defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiStaticDateTimePicker');
   const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile';
   const ampmInClock = defaultizedProps.ampmInClock ?? displayStaticWrapperAs === 'desktop';
+  const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
   const viewRenderers = _extends({
     day: renderDateViewCalendar,
     month: renderDateViewCalendar,
     year: renderDateViewCalendar,
-    hours: renderTimeViewClock,
-    minutes: renderTimeViewClock,
-    seconds: renderTimeViewClock
+    hours: renderTimeView,
+    minutes: renderTimeView,
+    seconds: renderTimeView,
+    meridiem: renderTimeView
   }, defaultizedProps.viewRenderers);
 
+  // Need to avoid adding the `meridiem` view when unexpected renderer is specified
+  const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name;
+  const views = !shouldHoursRendererContainMeridiemView ? defaultizedProps.views.filter(view => view !== 'meridiem') : defaultizedProps.views;
+
   // Props with the default values specific to the static variant
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
     displayStaticWrapperAs,
+    views,
     ampmInClock,
     yearsPerRow: defaultizedProps.yearsPerRow ?? (displayStaticWrapperAs === 'mobile' ? 3 : 4),
     slotProps: _extends({}, defaultizedProps.slotProps, {
@@ -46,7 +57,28 @@ const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTi
         hidden: displayStaticWrapperAs === 'desktop',
         ampmInClock
       }, defaultizedProps.slotProps?.toolbar)
-    })
+    }),
+    sx: mergeSx([{
+      [`& .${multiSectionDigitalClockClasses.root}`]: {
+        width: DIALOG_WIDTH
+      },
+      [`& .${multiSectionDigitalClockSectionClasses.root}`]: {
+        flex: 1,
+        // account for the border on `MultiSectionDigitalClock`
+        maxHeight: VIEW_HEIGHT - 1,
+        [`.${multiSectionDigitalClockSectionClasses.item}`]: {
+          width: 'auto'
+        }
+      },
+      [`& .${digitalClockClasses.root}`]: {
+        width: DIALOG_WIDTH,
+        maxHeight: VIEW_HEIGHT,
+        flex: 1,
+        [`.${digitalClockClasses.item}`]: {
+          justifyContent: 'center'
+        }
+      }
+    }], defaultizedProps?.sx)
   });
   const {
     renderPicker
@@ -236,7 +268,7 @@ StaticDateTimePicker.propTypes = {
    * Used when the component view is not controlled.
    * Must be a valid option from `views` list.
    */
-  openTo: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
+  openTo: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   /**
    * Force rendering in particular orientation.
    */
@@ -302,6 +334,11 @@ StaticDateTimePicker.propTypes = {
    * @default false
    */
   showDaysOutsideCurrentMonth: PropTypes.bool,
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -316,6 +353,22 @@ StaticDateTimePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn: PropTypes.number,
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * @default{ hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps: PropTypes.shape({
+    hours: PropTypes.number,
+    minutes: PropTypes.number,
+    seconds: PropTypes.number
+  }),
   /**
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
@@ -334,7 +387,7 @@ StaticDateTimePicker.propTypes = {
    * Used when the component view is controlled.
    * Must be a valid option from `views` list.
    */
-  view: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
+  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.
@@ -343,6 +396,7 @@ StaticDateTimePicker.propTypes = {
   viewRenderers: PropTypes.shape({
     day: PropTypes.func,
     hours: PropTypes.func,
+    meridiem: PropTypes.func,
     minutes: PropTypes.func,
     month: PropTypes.func,
     seconds: PropTypes.func,

package/modern/StaticDateTimePicker/StaticDateTimePicker.types.d.ts

@@ -1,10 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlotProps } from "../DateTimePicker/shared.js";
 import { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "../internals/hooks/useStaticPicker/index.js";
-import { DateOrTimeView } from "../models/index.js";
 export interface StaticDateTimePickerSlots extends BaseDateTimePickerSlots, UseStaticPickerSlots {}
 export interface StaticDateTimePickerSlotProps extends BaseDateTimePickerSlotProps, UseStaticPickerSlotProps {}
-export interface StaticDateTimePickerProps extends BaseDateTimePickerProps<DateOrTimeView>, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
+export interface StaticDateTimePickerProps extends BaseDateTimePickerProps, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
   /**
    * Overridable component slots.
    * @default {}

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/TimePicker/shared.d.ts

@@ -5,7 +5,7 @@ import { BasePickerInputProps } from "../internals/models/props/basePickerProps.
 import { LocalizedComponent } from "../locales/utils/pickersLocaleTextApi.js";
 import { TimePickerToolbarProps, ExportedTimePickerToolbarProps } from "./TimePickerToolbar.js";
 import { TimeValidationError } from "../models/index.js";
-import { PickerViewRendererLookup } from "../internals/hooks/usePicker/usePickerViews.js";
+import { PickerViewRendererLookup } from "../internals/hooks/usePicker/index.js";
 import { TimeViewRendererProps } from "../timeViewRenderers/index.js";
 import { BaseClockProps, ExportedBaseClockProps } from "../internals/models/props/time.js";
 import { PickerValue, TimeViewWithMeridiem } from "../internals/models/index.js";

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.14
  *
  * @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
@@ -154,7 +154,9 @@ export function PickerFieldUI(props) {
         disabled: triggerStatus === 'disabled',
         onClick: handleClickOpeningButton,
         'aria-label': openPickerAriaLabel,
-        edge: clearButtonPosition === 'start' && openPickerButtonPosition === 'start' ? undefined : openPickerButtonPosition
+        edge:
+        // open button is always rendered at the edge
+        textFieldProps.variant !== 'standard' ? openPickerButtonPosition : false
       },
       ownerState
     }),
@@ -176,7 +178,9 @@ export function PickerFieldUI(props) {
         tabIndex: -1,
         onClick: onClear,
         disabled: fieldResponse.disabled || fieldResponse.readOnly,
-        edge: clearButtonPosition === 'end' && openPickerButtonPosition === 'end' ? undefined : clearButtonPosition
+        edge:
+        // clear button can only be at the edge if it's position differs from the open button
+        textFieldProps.variant !== 'standard' && clearButtonPosition !== openPickerButtonPosition ? clearButtonPosition : false
       },
       ownerState
     }),
@@ -234,7 +238,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
+    getCurrentViewMode,
+    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' || getCurrentViewMode() === 'field') {
       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, getCurrentViewMode]);
   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, {