@mui/x-date-pickers 7.22.3 → 8.0.0-alpha.1

package/dateViewRenderers/dateViewRenderers.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { DateCalendarProps } from '../DateCalendar';
-import { DateView, PickerValidDate } from '../models';
+import { DateView } from '../models';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
-export interface DateViewRendererProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends Omit<DateCalendarProps<TDate>, 'views' | 'openTo' | 'view' | 'onViewChange' | 'focusedView'> {
+export interface DateViewRendererProps<TView extends DateOrTimeViewWithMeridiem> extends Omit<DateCalendarProps, 'views' | 'openTo' | 'view' | 'onViewChange' | 'focusedView'> {
     view: TView;
     onViewChange?: (view: TView) => void;
     views: readonly TView[];
     focusedView: TView | null;
 }
-export declare const renderDateViewCalendar: <TDate extends PickerValidDate>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsOrder, yearsPerRow, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;
+export declare const renderDateViewCalendar: ({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsOrder, yearsPerRow, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<DateView>) => React.JSX.Element;

package/hooks/index.d.ts

@@ -1,6 +1,6 @@
 export { useClearableField } from './useClearableField';
 export type { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps, UseClearableFieldResponse, } from './useClearableField';
-export { usePickersTranslations } from './usePickersTranslations';
+export { usePickerTranslations } from './usePickerTranslations';
 export { useSplitFieldProps } from './useSplitFieldProps';
 export { useParsedFormat } from './useParsedFormat';
-export { usePickersContext } from './usePickersContext';
+export { usePickerContext } from './usePickerContext';

package/hooks/index.js

@@ -1,5 +1,5 @@
 export { useClearableField } from "./useClearableField.js";
-export { usePickersTranslations } from "./usePickersTranslations.js";
+export { usePickerTranslations } from "./usePickerTranslations.js";
 export { useSplitFieldProps } from "./useSplitFieldProps.js";
 export { useParsedFormat } from "./useParsedFormat.js";
-export { usePickersContext } from "./usePickersContext.js";
+export { usePickerContext } from "./usePickerContext.js";

package/hooks/useClearableField.js

@@ -9,10 +9,10 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import MuiIconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import { ClearIcon } from "../icons/index.js";
-import { usePickersTranslations } from "./usePickersTranslations.js";
+import { usePickerTranslations } from "./usePickerTranslations.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const useClearableField = props => {
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const {
       clearable,
       onClear,
@@ -30,7 +30,8 @@ export const useClearableField = props => {
       ownerState: {},
       className: 'clearButton',
       additionalProps: {
-        title: translations.fieldClearLabel
+        title: translations.fieldClearLabel,
+        tabIndex: -1
       }
     }),
     iconButtonProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);

package/hooks/useParsedFormat.d.ts

@@ -1,6 +1,5 @@
-import { PickerValidDate } from '../models';
 import type { UseFieldInternalProps } from '../internals/hooks/useField';
-interface UseParsedFormatParameters extends Pick<UseFieldInternalProps<any, any, any, any, any>, 'format' | 'formatDensity' | 'shouldRespectLeadingZeros'> {
+interface UseParsedFormatParameters extends Pick<UseFieldInternalProps<any, any, any, any>, 'format' | 'formatDensity' | 'shouldRespectLeadingZeros'> {
 }
 /**
  * Returns the parsed format to be rendered in the field when there is no value or in other parts of the Picker.
@@ -11,5 +10,5 @@ interface UseParsedFormatParameters extends Pick<UseFieldInternalProps<any, any,
  * @param {boolean} params.shouldRespectLeadingZeros If `true`, the format will respect the leading zeroes, if `false`, the format will always add leading zeroes.
  * @returns
  */
-export declare const useParsedFormat: <TDate extends PickerValidDate>(parameters: UseParsedFormatParameters) => string;
+export declare const useParsedFormat: (parameters: UseParsedFormatParameters) => string;
 export {};

package/hooks/useParsedFormat.js

@@ -5,7 +5,7 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { buildSectionsFromFormat } from "../internals/hooks/useField/buildSectionsFromFormat.js";
 import { getLocalizedDigits } from "../internals/hooks/useField/useField.utils.js";
-import { usePickersTranslations } from "./usePickersTranslations.js";
+import { usePickerTranslations } from "./usePickerTranslations.js";
 /**
  * Returns the parsed format to be rendered in the field when there is no value or in other parts of the Picker.
  * This format is localized (e.g: `AAAA` for the year with the French locale) and cannot be parsed by your date library.
@@ -23,7 +23,7 @@ export const useParsedFormat = parameters => {
   } = parameters;
   const utils = useUtils();
   const isRtl = useRtl();
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const localizedDigits = React.useMemo(() => getLocalizedDigits(utils), [utils]);
   return React.useMemo(() => {
     const sections = buildSectionsFromFormat({

package/hooks/usePickerContext.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns the context passed by the picker that wraps the current component.
+ */
+export declare const usePickerContext: () => import("../internals/components/PickerProvider").PickerContextValue;

package/hooks/usePickerContext.js

@@ -0,0 +1,15 @@
+'use client';
+
+import * as React from 'react';
+import { PickerContext } from "../internals/components/PickerProvider.js";
+
+/**
+ * Returns the context passed by the picker that wraps the current component.
+ */
+export const usePickerContext = () => {
+  const value = React.useContext(PickerContext);
+  if (value == null) {
+    throw new Error(['MUI X: The `usePickerContext` can only be called in fields that are used as a slot of a picker component'].join('\n'));
+  }
+  return value;
+};

package/hooks/usePickerTranslations.d.ts

@@ -0,0 +1 @@
+export declare const usePickerTranslations: () => import("..").PickersLocaleText;

package/{modern/hooks/usePickersTranslations.js → hooks/usePickerTranslations.js}

@@ -1,4 +1,4 @@
 'use client';
 
 import { useLocalizationContext } from "../internals/hooks/useUtils.js";
-export const usePickersTranslations = () => useLocalizationContext().localeText;
+export const usePickerTranslations = () => useLocalizationContext().localeText;

package/hooks/useSplitFieldProps.d.ts

@@ -1,7 +1,7 @@
-import { FieldValueType } from '../models';
 import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from '../validation/extractValidationProps';
+import { PickerValueType } from '../models/common';
 declare const SHARED_FIELD_INTERNAL_PROP_NAMES: readonly ["value", "defaultValue", "referenceDate", "format", "formatDensity", "onChange", "timezone", "onError", "shouldRespectLeadingZeros", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef", "enableAccessibleFieldDOMStructure", "disabled", "readOnly", "dateSeparator"];
-type InternalPropNames<TValueType extends FieldValueType> = (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);
+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:
  * - `internalProps` which are used by the various hooks called by the field component.
@@ -12,7 +12,7 @@ type InternalPropNames<TValueType extends FieldValueType> = (typeof SHARED_FIELD
  * @param {TProps} props The props received by the field component.
  * @param {TValueType} valueType The type of the field value ('date', 'time', or 'date-time').
  */
-export declare const useSplitFieldProps: <TValueType extends FieldValueType, TProps extends { [key in InternalPropNames<TValueType>]?: any; }>(props: TProps, valueType: TValueType) => {
+export declare const useSplitFieldProps: <TValueType extends PickerValueType, TProps extends { [key in InternalPropNames<TValueType>]?: any; }>(props: TProps, valueType: TValueType) => {
     forwardedProps: Omit<TProps, InternalPropNames<TValueType>>;
     internalProps: Pick<TProps, InternalPropNames<TValueType>>;
 };

package/index.js

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

package/internals/components/PickerProvider.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { PickerOwnerState } from '../../models';
+import { PickersInputLocaleText } from '../../locales';
+import { PickerOrientation, PickerVariant } from '../models';
+export declare const PickerContext: React.Context<PickerContextValue | null>;
+export declare const PickerPrivateContext: React.Context<PickerPrivateContextValue>;
+/**
+ * Provides the context for the various parts of a picker component:
+ * - contextValue: the context for the picker sub-components.
+ * - localizationProvider: the translations passed through the props and through a parent LocalizationProvider.
+ *
+ * @ignore - do not document.
+ */
+export declare function PickerProvider(props: PickerProviderProps): React.JSX.Element;
+export interface PickerProviderProps {
+    contextValue: PickerContextValue;
+    privateContextValue: PickerPrivateContextValue;
+    localeText: PickersInputLocaleText | undefined;
+    children: React.ReactNode;
+}
+export interface PickerContextValue {
+    /**
+     * Open the picker.
+     * @param {React.UIEvent} event The DOM event that triggered the change.
+     */
+    onOpen: (event: React.UIEvent) => void;
+    /**
+     * Close the picker.
+     * @param {React.UIEvent} event The DOM event that triggered the change.
+     */
+    onClose: (event: React.UIEvent) => void;
+    /**
+     * `true` if the picker is open, `false` otherwise.
+     */
+    open: boolean;
+    /**
+     * `true` if the picker is disabled, `false` otherwise.
+     */
+    disabled: boolean;
+    /**
+     * `true` if the picker is read-only, `false` otherwise.
+     */
+    readOnly: boolean;
+    /**
+     * The responsive variant of the picker.
+     * Is equal to "desktop" when using a desktop picker (like <DesktopDatePicker />).
+     * Is equal to "mobile" when using a mobile picker (like <MobileDatePicker />).
+     * Is equal to "mobile" or "desktop" when using a responsive picker (like <DatePicker />) depending on the `desktopModeMediaQuery` prop.
+     * Is equal to "mobile" or "desktop" when using a static picker (like <StaticDatePicker />) depending on the `displayStaticWrapperAs` prop.
+     * Is always equal to "desktop" if the component you are accessing the ownerState from is not wrapped by a picker.
+     */
+    variant: PickerVariant;
+    /**
+     * The orientation of the picker.
+     * Is equal to "landscape" when the picker is in landscape orientation.
+     * Is equal to "portrait" when the picker is in portrait orientation.
+     * You can use the "orientation" on any picker component to force the orientation.
+     * Is always equal to "portrait" if the component you are accessing the ownerState from is not wrapped by a picker.
+     */
+    orientation: PickerOrientation;
+}
+export interface PickerPrivateContextValue {
+    /**
+     * The ownerState of the picker.
+     */
+    ownerState: PickerOwnerState;
+}

package/internals/components/PickerProvider.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { LocalizationProvider } from "../../LocalizationProvider/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PickerContext = /*#__PURE__*/React.createContext(null);
+export const PickerPrivateContext = /*#__PURE__*/React.createContext({
+  ownerState: {
+    isPickerDisabled: false,
+    isPickerReadOnly: false,
+    isPickerValueEmpty: false,
+    isPickerOpen: false,
+    pickerVariant: 'desktop',
+    pickerOrientation: 'portrait'
+  }
+});
+
+/**
+ * Provides the context for the various parts of a picker component:
+ * - contextValue: the context for the picker sub-components.
+ * - localizationProvider: the translations passed through the props and through a parent LocalizationProvider.
+ *
+ * @ignore - do not document.
+ */
+export function PickerProvider(props) {
+  const {
+    contextValue,
+    privateContextValue,
+    localeText,
+    children
+  } = props;
+  return /*#__PURE__*/_jsx(PickerContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(PickerPrivateContext.Provider, {
+      value: privateContextValue,
+      children: /*#__PURE__*/_jsx(LocalizationProvider, {
+        localeText: localeText,
+        children: children
+      })
+    })
+  });
+}

package/internals/hooks/date-helpers-hooks.d.ts

@@ -1,16 +1,16 @@
 import { PickerOnChangeFn } from './useViews';
 import { PickerSelectionState } from './usePicker';
 import { PickersTimezone, PickerValidDate } from '../../models';
-export interface MonthValidationOptions<TDate extends PickerValidDate> {
+export interface MonthValidationOptions {
     disablePast?: boolean;
     disableFuture?: boolean;
-    minDate: TDate;
-    maxDate: TDate;
+    minDate: PickerValidDate;
+    maxDate: PickerValidDate;
     timezone: PickersTimezone;
 }
-export declare function useNextMonthDisabled<TDate extends PickerValidDate>(month: TDate, { disableFuture, maxDate, timezone, }: Pick<MonthValidationOptions<TDate>, 'disableFuture' | 'maxDate' | 'timezone'>): boolean;
-export declare function usePreviousMonthDisabled<TDate extends PickerValidDate>(month: TDate, { disablePast, minDate, timezone, }: Pick<MonthValidationOptions<TDate>, 'disablePast' | 'minDate' | 'timezone'>): boolean;
-export declare function useMeridiemMode<TDate extends PickerValidDate>(date: TDate | null, ampm: boolean | undefined, onChange: PickerOnChangeFn<TDate>, selectionState?: PickerSelectionState): {
+export declare function useNextMonthDisabled(month: PickerValidDate, { disableFuture, maxDate, timezone, }: Pick<MonthValidationOptions, 'disableFuture' | 'maxDate' | 'timezone'>): boolean;
+export declare function usePreviousMonthDisabled(month: PickerValidDate, { disablePast, minDate, timezone, }: Pick<MonthValidationOptions, 'disablePast' | 'minDate' | 'timezone'>): boolean;
+export declare function useMeridiemMode(date: PickerValidDate | null, ampm: boolean | undefined, onChange: PickerOnChangeFn, selectionState?: PickerSelectionState): {
     meridiemMode: import("../utils/time-utils").Meridiem | null;
     handleMeridiemChange: (mode: "am" | "pm") => void;
 };

package/internals/hooks/defaultizedFieldProps.d.ts

@@ -1,19 +1,18 @@
+import { DefaultizedProps } from '@mui/x-internals/types';
 import { BaseDateValidationProps, BaseTimeValidationProps, DateTimeValidationProps, TimeValidationProps } from '../models/validation';
-import { DefaultizedProps } from '../models/helpers';
-import { PickerValidDate } from '../../models';
-export interface UseDefaultizedDateFieldBaseProps<TDate extends PickerValidDate> extends BaseDateValidationProps<TDate> {
+export interface UseDefaultizedDateFieldBaseProps extends BaseDateValidationProps {
     format?: string;
 }
-export declare const useDefaultizedDateField: <TDate extends PickerValidDate, TKnownProps extends UseDefaultizedDateFieldBaseProps<TDate>, TAllProps extends {}>(props: TKnownProps & TAllProps) => TAllProps & DefaultizedProps<TKnownProps, keyof UseDefaultizedDateFieldBaseProps<any>>;
+export declare const useDefaultizedDateField: <TKnownProps extends UseDefaultizedDateFieldBaseProps, TAllProps extends {}>(props: TKnownProps & TAllProps) => TAllProps & DefaultizedProps<TKnownProps, keyof UseDefaultizedDateFieldBaseProps>;
 export interface UseDefaultizedTimeFieldBaseProps extends BaseTimeValidationProps {
     format?: string;
 }
-export declare const useDefaultizedTimeField: <TDate extends PickerValidDate, TKnownProps extends UseDefaultizedTimeFieldBaseProps & {
+export declare const useDefaultizedTimeField: <TKnownProps extends UseDefaultizedTimeFieldBaseProps & {
     ampm?: boolean;
 }, TAllProps extends {}>(props: TKnownProps & TAllProps) => TAllProps & DefaultizedProps<TKnownProps, keyof UseDefaultizedTimeFieldBaseProps>;
-export interface UseDefaultizedDateTimeFieldBaseProps<TDate extends PickerValidDate> extends BaseDateValidationProps<TDate>, BaseTimeValidationProps {
+export interface UseDefaultizedDateTimeFieldBaseProps extends BaseDateValidationProps, BaseTimeValidationProps {
     format?: string;
 }
-export declare const useDefaultizedDateTimeField: <TDate extends PickerValidDate, TKnownProps extends UseDefaultizedDateTimeFieldBaseProps<TDate> & DateTimeValidationProps<TDate> & TimeValidationProps<TDate> & {
+export declare const useDefaultizedDateTimeField: <TKnownProps extends UseDefaultizedDateTimeFieldBaseProps & DateTimeValidationProps & TimeValidationProps & {
     ampm?: boolean;
-}, TAllProps extends {}>(props: TKnownProps & TAllProps) => TAllProps & DefaultizedProps<TKnownProps, keyof UseDefaultizedDateTimeFieldBaseProps<any>>;
+}, TAllProps extends {}>(props: TKnownProps & TAllProps) => TAllProps & DefaultizedProps<TKnownProps, keyof UseDefaultizedDateTimeFieldBaseProps>;

package/internals/hooks/useClockReferenceDate.d.ts

@@ -1,8 +1,8 @@
 import { MuiPickersAdapter, PickersTimezone, PickerValidDate } from '../../models';
-export declare const useClockReferenceDate: <TDate extends PickerValidDate, TProps extends {}>({ value, referenceDate: referenceDateProp, utils, props, timezone, }: {
-    value: TDate;
-    referenceDate: TDate | undefined;
-    utils: MuiPickersAdapter<TDate>;
+export declare const useClockReferenceDate: <TProps extends {}>({ value, referenceDate: referenceDateProp, utils, props, timezone, }: {
+    value: PickerValidDate;
+    referenceDate: PickerValidDate | undefined;
+    utils: MuiPickersAdapter;
     props: TProps;
     timezone: PickersTimezone;
-}) => TDate;
+}) => PickerValidDate;

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { UseDesktopPickerParams, UseDesktopPickerProps } from './useDesktopPicker.types';
-import { PickerValidDate } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
 /**
  * Hook managing all the single-date desktop pickers:
@@ -8,6 +7,6 @@ import { DateOrTimeViewWithMeridiem } from '../../models';
  * - DesktopDateTimePicker
  * - DesktopTimePicker
  */
-export declare const useDesktopPicker: <TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseDesktopPickerParams<TDate, TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
+export declare const useDesktopPicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseDesktopPickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
     renderPicker: () => React.JSX.Element;
 };

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -12,7 +12,7 @@ import useId from '@mui/utils/useId';
 import { PickersPopper } from "../../components/PickersPopper.js";
 import { usePicker } from "../usePicker/index.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
-import { PickersProvider } from "../../components/PickersProvider.js";
+import { PickerProvider } from "../../components/PickerProvider.js";
 
 /**
  * Hook managing all the single-date desktop pickers:
@@ -56,17 +56,18 @@ export const useDesktopPicker = _ref => {
     actions,
     hasUIView,
     layoutProps,
+    providerProps,
     renderCurrentView,
     shouldRestoreFocus,
     fieldProps: pickerFieldProps,
-    contextValue,
     ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
     fieldRef,
+    localeText,
     autoFocusView: true,
     additionalViewProps: {},
-    wrapperVariant: 'desktop'
+    variant: 'desktop'
   }));
   const InputAdornment = slots.inputAdornment ?? MuiInputAdornment;
   const _useSlotProps = useSlotProps({
@@ -75,7 +76,7 @@ export const useDesktopPicker = _ref => {
       additionalProps: {
         position: 'end'
       },
-      ownerState: props
+      ownerState
     }),
     inputAdornmentProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
   const OpenPickerButton = slots.openPickerButton ?? IconButton;
@@ -88,7 +89,7 @@ export const useDesktopPicker = _ref => {
         'aria-label': getOpenDialogAriaText(pickerFieldProps.value),
         edge: inputAdornmentProps.position
       },
-      ownerState: props
+      ownerState
     }),
     openPickerButtonProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded3);
   const OpenPickerIcon = slots.openPickerIcon;
@@ -101,27 +102,32 @@ export const useDesktopPicker = _ref => {
   const fieldProps = useSlotProps({
     elementType: Field,
     externalSlotProps: innerSlotProps?.field,
-    additionalProps: _extends({}, pickerFieldProps, isToolbarHidden && {
-      id: labelId
-    }, {
+    additionalProps: _extends({
+      // Internal props
       readOnly,
       disabled,
-      className,
-      sx,
       format,
       formatDensity,
       enableAccessibleFieldDOMStructure,
       selectedSections,
       onSelectedSectionsChange,
       timezone,
+      autoFocus: autoFocus && !props.open
+    }, pickerFieldProps, {
+      // onChange and value
+
+      // Forwarded props
+      className,
+      sx,
       label,
       name,
-      autoFocus: autoFocus && !props.open,
       focused: open ? true : undefined
-    }, inputRef ? {
+    }, isToolbarHidden && {
+      id: labelId
+    }, !!inputRef && {
       inputRef
-    } : {}),
-    ownerState: props
+    }),
+    ownerState
   });
 
   // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged
@@ -159,9 +165,7 @@ export const useDesktopPicker = _ref => {
     }, innerSlotProps?.popper)
   });
   const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
-  const renderPicker = () => /*#__PURE__*/_jsxs(PickersProvider, {
-    contextValue: contextValue,
-    localeText: localeText,
+  const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
     children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
       slots: slotsForField,
       slotProps: slotProps,
@@ -182,7 +186,7 @@ export const useDesktopPicker = _ref => {
         children: renderCurrentView()
       }))
     }))]
-  });
+  }));
   return {
     renderPicker
   };

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

@@ -3,17 +3,17 @@ import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 import { InputAdornmentProps } from '@mui/material/InputAdornment';
 import TextField from '@mui/material/TextField';
 import { SlotComponentProps } from '@mui/utils';
+import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { BaseNonStaticPickerProps, BasePickerProps, BaseNonRangeNonStaticPickerProps } from '../../models/props/basePickerProps';
 import { PickersPopperSlots, PickersPopperSlotProps } from '../../components/PickersPopper';
-import { UsePickerParams, UsePickerProps } from '../usePicker';
-import { BaseSingleInputFieldProps, FieldSection, PickerOwnerState, PickerValidDate } from '../../../models';
+import { UsePickerParams } from '../usePicker';
+import { FieldSection, PickerFieldSlotProps, PickerOwnerState, PickerValidDate } from '../../../models';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from '../../../PickersLayout/PickersLayout.types';
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types';
 import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
 import { DateOrTimeViewWithMeridiem } from '../../models';
 import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '../../../hooks/useClearableField';
-import { SlotComponentPropsFromProps } from '../../models/helpers';
-export interface UseDesktopPickerSlots<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends Pick<PickersPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<TDate | null, TDate, TView>, UseClearableFieldSlots {
+export interface UseDesktopPickerSlots<TView extends DateOrTimeViewWithMeridiem> extends Pick<PickersPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValidDate | null, TView>, UseClearableFieldSlots {
     /**
      * Component used to enter the date with the keyboard.
      */
@@ -38,14 +38,14 @@ export interface UseDesktopPickerSlots<TDate extends PickerValidDate, TView exte
      */
     openPickerIcon: React.ElementType;
 }
-export interface UseDesktopPickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TDate, TView, TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<TDate | null, TDate, TView>, 'toolbar'> {
+export interface UseDesktopPickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValidDate | null, TView>, 'toolbar'> {
 }
-export interface ExportedUseDesktopPickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends PickersPopperSlotProps, ExportedPickersLayoutSlotProps<TDate | null, TDate, TView>, UseClearableFieldSlotProps {
-    field?: SlotComponentPropsFromProps<BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, TEnableAccessibleFieldDOMStructure, unknown>, {}, UsePickerProps<TDate | null, TDate, any, any, any, any>>;
+export interface ExportedUseDesktopPickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends PickersPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValidDate | null, TView>, UseClearableFieldSlotProps {
+    field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
     textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
-    inputAdornment?: Partial<InputAdornmentProps>;
-    openPickerButton?: SlotComponentProps<typeof IconButton, {}, UseDesktopPickerProps<TDate, any, TEnableAccessibleFieldDOMStructure, any, any>>;
-    openPickerIcon?: SlotComponentPropsFromProps<Record<string, any>, {}, PickerOwnerState<TDate | null>>;
+    inputAdornment?: SlotComponentPropsFromProps<InputAdornmentProps, {}, PickerOwnerState>;
+    openPickerButton?: SlotComponentProps<typeof IconButton, {}, PickerOwnerState>;
+    openPickerIcon?: SlotComponentPropsFromProps<Record<string, any>, {}, PickerOwnerState>;
 }
 export interface DesktopOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps {
     /**
@@ -54,19 +54,19 @@ export interface DesktopOnlyPickerProps extends BaseNonStaticPickerProps, BaseNo
      */
     autoFocus?: boolean;
 }
-export interface UseDesktopPickerProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<TDate | null, TDate, TView, any, {}>> extends BasePickerProps<TDate | null, TDate, TView, TError, TExternalProps, {}>, DesktopOnlyPickerProps {
+export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<PickerValidDate | null, TView, any, {}>> extends BasePickerProps<PickerValidDate | null, TView, TError, TExternalProps, {}>, MakeRequired<DesktopOnlyPickerProps, 'format'> {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots: UseDesktopPickerSlots<TDate, TView>;
+    slots: UseDesktopPickerSlots<TView>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: UseDesktopPickerSlotProps<TDate, TView, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: UseDesktopPickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
 }
-export interface UseDesktopPickerParams<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor'> {
+export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValidDate | null, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor'> {
     props: TExternalProps;
-    getOpenDialogAriaText: (date: TDate | null) => string;
+    getOpenDialogAriaText: (date: PickerValidDate | null) => string;
 }

package/internals/hooks/useField/buildSectionsFromFormat.d.ts

@@ -1,15 +1,15 @@
 import { FieldSection, MuiPickersAdapter, PickerValidDate } from '../../../models';
 import { PickersLocaleText } from '../../../locales';
-interface BuildSectionsFromFormatParams<TDate extends PickerValidDate> {
-    utils: MuiPickersAdapter<TDate>;
+interface BuildSectionsFromFormatParams {
+    utils: MuiPickersAdapter;
     format: string;
     formatDensity: 'dense' | 'spacious';
     isRtl: boolean;
     shouldRespectLeadingZeros: boolean;
-    localeText: PickersLocaleText<TDate>;
+    localeText: PickersLocaleText;
     localizedDigits: string[];
-    date: TDate | null;
+    date: PickerValidDate | null;
     enableAccessibleFieldDOMStructure: boolean;
 }
-export declare const buildSectionsFromFormat: <TDate extends PickerValidDate>(params: BuildSectionsFromFormatParams<TDate>) => FieldSection[];
+export declare const buildSectionsFromFormat: (params: BuildSectionsFromFormatParams) => FieldSection[];
 export {};

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

@@ -1,5 +1,5 @@
 import { UseFieldParams, UseFieldResponse, UseFieldCommonForwardedProps, UseFieldInternalProps, UseFieldForwardedProps } from './useField.types';
-import { PickerValidDate, FieldSection } from '../../../models';
-export declare const useField: <TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<any, any, any, TEnableAccessibleFieldDOMStructure, any> & {
+import { FieldSection } from '../../../models';
+export declare const useField: <TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<any, any, TEnableAccessibleFieldDOMStructure, any> & {
     minutesStep?: number;
-}>(params: UseFieldParams<TValue, TDate, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps>;
+}>(params: UseFieldParams<TValue, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps>;

package/internals/hooks/useField/useField.js

@@ -17,7 +17,7 @@ export const useField = params => {
     internalProps: {
       unstableFieldRef,
       minutesStep,
-      enableAccessibleFieldDOMStructure = false,
+      enableAccessibleFieldDOMStructure = true,
       disabled = false,
       readOnly = false
     },