@mui/x-date-pickers 8.0.0-alpha.7 → 8.0.0-alpha.8

package/internals/components/PickerFieldUI.js

@@ -0,0 +1,306 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["enableAccessibleFieldDOMStructure"],
+  _excluded2 = ["InputProps", "readOnly", "onClear", "clearable", "clearButtonPosition", "openPickerButtonPosition", "openPickerAriaLabel"],
+  _excluded3 = ["onPaste", "onKeyDown", "inputMode", "readOnly", "InputProps", "inputProps", "inputRef", "onClear", "clearable", "clearButtonPosition", "openPickerButtonPosition", "openPickerAriaLabel"],
+  _excluded4 = ["ownerState"],
+  _excluded5 = ["ownerState"],
+  _excluded6 = ["ownerState"],
+  _excluded7 = ["ownerState"],
+  _excluded8 = ["InputProps", "inputProps"];
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import resolveComponentProps from '@mui/utils/resolveComponentProps';
+import MuiTextField from '@mui/material/TextField';
+import MuiIconButton from '@mui/material/IconButton';
+import MuiInputAdornment from '@mui/material/InputAdornment';
+import useSlotProps from '@mui/utils/useSlotProps';
+import { useFieldOwnerState } from "../hooks/useFieldOwnerState.js";
+import { usePickerTranslations } from "../../hooks/index.js";
+import { ClearIcon as MuiClearIcon } from "../../icons/index.js";
+import { useNullablePickerContext } from "../hooks/useNullablePickerContext.js";
+import { PickersTextField } from "../../PickersTextField/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const cleanFieldResponse = _ref => {
+  let {
+      enableAccessibleFieldDOMStructure
+    } = _ref,
+    fieldResponse = _objectWithoutPropertiesLoose(_ref, _excluded);
+  if (enableAccessibleFieldDOMStructure) {
+    const {
+        InputProps,
+        readOnly,
+        onClear,
+        clearable,
+        clearButtonPosition,
+        openPickerButtonPosition,
+        openPickerAriaLabel
+      } = fieldResponse,
+      other = _objectWithoutPropertiesLoose(fieldResponse, _excluded2);
+    return {
+      clearable,
+      onClear,
+      clearButtonPosition,
+      openPickerButtonPosition,
+      openPickerAriaLabel,
+      textFieldProps: _extends({}, other, {
+        InputProps: _extends({}, InputProps ?? {}, {
+          readOnly
+        })
+      })
+    };
+  }
+  const {
+      onPaste,
+      onKeyDown,
+      inputMode,
+      readOnly,
+      InputProps,
+      inputProps,
+      inputRef,
+      onClear,
+      clearable,
+      clearButtonPosition,
+      openPickerButtonPosition,
+      openPickerAriaLabel
+    } = fieldResponse,
+    other = _objectWithoutPropertiesLoose(fieldResponse, _excluded3);
+  return {
+    clearable,
+    onClear,
+    clearButtonPosition,
+    openPickerButtonPosition,
+    openPickerAriaLabel,
+    textFieldProps: _extends({}, other, {
+      InputProps: _extends({}, InputProps ?? {}, {
+        readOnly
+      }),
+      inputProps: _extends({}, inputProps ?? {}, {
+        inputMode,
+        onPaste,
+        onKeyDown,
+        ref: inputRef
+      })
+    })
+  };
+};
+const PickerFieldUIContext = /*#__PURE__*/React.createContext({
+  slots: {},
+  slotProps: {}
+});
+
+/**
+ * Adds the button to open the picker and the button to clear the value of the field.
+ * @ignore - internal component.
+ */
+export function PickerFieldUI(props) {
+  const {
+    slots,
+    slotProps,
+    fieldResponse,
+    defaultOpenPickerIcon
+  } = props;
+  const translations = usePickerTranslations();
+  const pickerContext = useNullablePickerContext();
+  const pickerFieldUIContext = React.useContext(PickerFieldUIContext);
+  const {
+    textFieldProps,
+    onClear,
+    clearable,
+    openPickerAriaLabel,
+    clearButtonPosition: clearButtonPositionProp = 'end',
+    openPickerButtonPosition: openPickerButtonPositionProp = 'end'
+  } = cleanFieldResponse(fieldResponse);
+  const ownerState = useFieldOwnerState(textFieldProps);
+  const handleClickOpeningButton = useEventCallback(event => {
+    event.preventDefault();
+    pickerContext?.setOpen(prev => !prev);
+  });
+  const triggerStatus = pickerContext ? pickerContext.triggerStatus : 'hidden';
+  const clearButtonPosition = clearable ? clearButtonPositionProp : null;
+  const openPickerButtonPosition = triggerStatus !== 'hidden' ? openPickerButtonPositionProp : null;
+  const TextField = slots?.textField ?? pickerFieldUIContext.slots.textField ?? (fieldResponse.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
+  const InputAdornment = slots?.inputAdornment ?? pickerFieldUIContext.slots.inputAdornment ?? MuiInputAdornment;
+  const _useSlotProps = useSlotProps({
+      elementType: InputAdornment,
+      externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.inputAdornment, slotProps?.inputAdornment),
+      additionalProps: {
+        position: 'start'
+      },
+      ownerState: _extends({}, ownerState, {
+        position: 'start'
+      })
+    }),
+    startInputAdornmentProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded4);
+  const _useSlotProps2 = useSlotProps({
+      elementType: InputAdornment,
+      externalSlotProps: slotProps?.inputAdornment,
+      additionalProps: {
+        position: 'end'
+      },
+      ownerState: _extends({}, ownerState, {
+        position: 'end'
+      })
+    }),
+    endInputAdornmentProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded5);
+  const OpenPickerButton = pickerFieldUIContext.slots.openPickerButton ?? MuiIconButton;
+  // We don't want to forward the `ownerState` to the `<IconButton />` component, see mui/material-ui#34056
+  const _useSlotProps3 = useSlotProps({
+      elementType: OpenPickerButton,
+      externalSlotProps: pickerFieldUIContext.slotProps.openPickerButton,
+      additionalProps: {
+        disabled: triggerStatus === 'disabled',
+        onClick: handleClickOpeningButton,
+        'aria-label': openPickerAriaLabel,
+        edge: clearButtonPosition === 'start' && openPickerButtonPosition === 'start' ? undefined : openPickerButtonPosition
+      },
+      ownerState
+    }),
+    openPickerButtonProps = _objectWithoutPropertiesLoose(_useSlotProps3, _excluded6);
+  const OpenPickerIcon = pickerFieldUIContext.slots.openPickerIcon ?? defaultOpenPickerIcon;
+  const openPickerIconProps = useSlotProps({
+    elementType: OpenPickerIcon,
+    externalSlotProps: pickerFieldUIContext.slotProps.openPickerIcon,
+    ownerState
+  });
+  const ClearButton = slots?.clearButton ?? pickerFieldUIContext.slots.clearButton ?? MuiIconButton;
+  // We don't want to forward the `ownerState` to the `<IconButton />` component, see mui/material-ui#34056
+  const _useSlotProps4 = useSlotProps({
+      elementType: ClearButton,
+      externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.clearButton, slotProps?.clearButton),
+      className: 'clearButton',
+      additionalProps: {
+        title: translations.fieldClearLabel,
+        tabIndex: -1,
+        onClick: onClear,
+        disabled: fieldResponse.disabled || fieldResponse.readOnly,
+        edge: clearButtonPosition === 'end' && openPickerButtonPosition === 'end' ? undefined : clearButtonPosition
+      },
+      ownerState
+    }),
+    clearButtonProps = _objectWithoutPropertiesLoose(_useSlotProps4, _excluded7);
+  const ClearIcon = slots?.clearIcon ?? pickerFieldUIContext.slots.clearIcon ?? MuiClearIcon;
+  const clearIconProps = useSlotProps({
+    elementType: ClearIcon,
+    externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.clearIcon, slotProps?.clearIcon),
+    additionalProps: {
+      fontSize: 'small'
+    },
+    ownerState
+  });
+  if (!textFieldProps.InputProps) {
+    textFieldProps.InputProps = {};
+  }
+  if (pickerContext) {
+    textFieldProps.InputProps.ref = pickerContext.triggerRef;
+  }
+  if (!textFieldProps.InputProps?.startAdornment && (clearButtonPosition === 'start' || openPickerButtonPosition === 'start')) {
+    textFieldProps.InputProps.startAdornment = /*#__PURE__*/_jsxs(InputAdornment, _extends({}, startInputAdornmentProps, {
+      children: [openPickerButtonPosition === 'start' && /*#__PURE__*/_jsx(OpenPickerButton, _extends({}, openPickerButtonProps, {
+        children: /*#__PURE__*/_jsx(OpenPickerIcon, _extends({}, openPickerIconProps))
+      })), clearButtonPosition === 'start' && /*#__PURE__*/_jsx(ClearButton, _extends({}, clearButtonProps, {
+        children: /*#__PURE__*/_jsx(ClearIcon, _extends({}, clearIconProps))
+      }))]
+    }));
+  }
+  if (!textFieldProps.InputProps?.endAdornment && (clearButtonPosition === 'end' || openPickerButtonPosition === 'end')) {
+    textFieldProps.InputProps.endAdornment = /*#__PURE__*/_jsxs(InputAdornment, _extends({}, endInputAdornmentProps, {
+      children: [clearButtonPosition === 'end' && /*#__PURE__*/_jsx(ClearButton, _extends({}, clearButtonProps, {
+        children: /*#__PURE__*/_jsx(ClearIcon, _extends({}, clearIconProps))
+      })), openPickerButtonPosition === 'end' && /*#__PURE__*/_jsx(OpenPickerButton, _extends({}, openPickerButtonProps, {
+        children: /*#__PURE__*/_jsx(OpenPickerIcon, _extends({}, openPickerIconProps))
+      }))]
+    }));
+  }
+  if (clearButtonPosition != null) {
+    textFieldProps.sx = [{
+      '& .clearButton': {
+        opacity: 1
+      },
+      '@media (pointer: fine)': {
+        '& .clearButton': {
+          opacity: 0
+        },
+        '&:hover, &:focus-within': {
+          '.clearButton': {
+            opacity: 1
+          }
+        }
+      }
+    }, ...(Array.isArray(textFieldProps.sx) ? textFieldProps.sx : [textFieldProps.sx])];
+  }
+  return /*#__PURE__*/_jsx(TextField, _extends({}, textFieldProps));
+}
+function mergeSlotProps(slotPropsA, slotPropsB) {
+  if (!slotPropsA) {
+    return slotPropsB;
+  }
+  if (!slotPropsB) {
+    return slotPropsA;
+  }
+  return ownerState => {
+    return _extends({}, resolveComponentProps(slotPropsB, ownerState), resolveComponentProps(slotPropsA, ownerState));
+  };
+}
+
+/**
+ * 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.
+ */
+export function useFieldTextFieldProps(parameters) {
+  const {
+    ref,
+    externalForwardedProps,
+    slotProps
+  } = parameters;
+  const pickerFieldUIContext = React.useContext(PickerFieldUIContext);
+  const ownerState = useFieldOwnerState(externalForwardedProps);
+  const {
+      InputProps,
+      inputProps
+    } = externalForwardedProps,
+    otherExternalForwardedProps = _objectWithoutPropertiesLoose(externalForwardedProps, _excluded8);
+  const textFieldProps = useSlotProps({
+    elementType: PickersTextField,
+    externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.textField, slotProps?.textField),
+    externalForwardedProps: otherExternalForwardedProps,
+    additionalProps: {
+      ref
+    },
+    ownerState
+  });
+
+  // TODO: Remove when mui/material-ui#35088 will be merged
+  textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
+  textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
+  return textFieldProps;
+}
+export function PickerFieldUIContextProvider(props) {
+  const {
+    slots = {},
+    slotProps = {},
+    children
+  } = props;
+  const contextValue = React.useMemo(() => ({
+    slots: {
+      openPickerButton: slots.openPickerButton,
+      openPickerIcon: slots.openPickerIcon,
+      textField: slots.textField,
+      inputAdornment: slots.inputAdornment,
+      clearIcon: slots.clearIcon,
+      clearButton: slots.clearButton
+    },
+    slotProps: {
+      openPickerButton: slotProps.openPickerButton,
+      openPickerIcon: slotProps.openPickerIcon,
+      textField: slotProps.textField,
+      inputAdornment: slotProps.inputAdornment,
+      clearIcon: slotProps.clearIcon,
+      clearButton: slotProps.clearButton
+    }
+  }), [slots.openPickerButton, slots.openPickerIcon, slots.textField, slots.inputAdornment, slots.clearIcon, slots.clearButton, slotProps.openPickerButton, slotProps.openPickerIcon, slotProps.textField, slotProps.inputAdornment, slotProps.clearIcon, slotProps.clearButton]);
+  return /*#__PURE__*/_jsx(PickerFieldUIContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}

package/internals/components/PickerProvider.d.ts

@@ -4,7 +4,7 @@ import { PickersInputLocaleText } from '../../locales';
 import { DateOrTimeViewWithMeridiem, PickerOrientation, PickerValidValue, PickerVariant } from '../models';
 import type { UsePickerValueActionsContextValue, UsePickerValueContextValue, UsePickerValuePrivateContextValue } from '../hooks/usePicker/usePickerValue.types';
 import { UsePickerViewsActionsContextValue, UsePickerViewsContextValue } from '../hooks/usePicker/usePickerViews';
-export declare const PickerContext: React.Context<PickerContextValue<any, any, any> | null>;
+import { PickerFieldPrivateContextValue } from '../hooks/useField/useFieldInternalPropsWithDefaults';
 export declare const PickerActionsContext: React.Context<PickerActionsContextValue<any, any, any> | null>;
 export declare const PickerPrivateContext: React.Context<PickerPrivateContextValue>;
 /**
@@ -19,6 +19,7 @@ export interface PickerProviderProps<TValue extends PickerValidValue> {
     contextValue: PickerContextValue<any, any, any>;
     actionsContextValue: PickerActionsContextValue<any, any, any>;
     privateContextValue: PickerPrivateContextValue;
+    fieldPrivateContextValue: PickerFieldPrivateContextValue;
     isValidContextValue: (value: TValue) => boolean;
     localeText: PickersInputLocaleText | undefined;
     children: React.ReactNode;
@@ -38,7 +39,7 @@ export interface PickerContextValue<TValue extends PickerValidValue, TView exten
      * 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.
+     * Is always equal to "desktop" if the component you are accessing the context from is not wrapped by a picker.
      */
     variant: PickerVariant;
     /**
@@ -46,11 +47,31 @@ export interface PickerContextValue<TValue extends PickerValidValue, TView exten
      * 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.
+     * Is always equal to "portrait" if the component you are accessing the context from is not wrapped by a picker.
      */
     orientation: PickerOrientation;
+    /**
+     * The ref that should be attached to the element that triggers the Picker opening.
+     * When using a built-in field component, this property is automatically handled.
+     */
+    triggerRef: React.RefObject<any>;
+    /**
+     * The status of the element that triggers the Picker opening.
+     * If it is "hidden", the field should not render the UI to open the Picker.
+     * If it is "disabled", the field should render a disabled UI to open the Picker.
+     * If it is "enabled", the field should render an interactive UI to open the Picker.
+     */
+    triggerStatus: 'hidden' | 'disabled' | 'enabled';
+    /**
+     * Format that should be used to render the value in the field.
+     * Is equal to `props.format` on the picker component if defined.
+     * Is generated based on the available views if not defined.
+     * Is equal to an empty string if the picker does not have a field (static pickers).
+     * Is always equal to an empty string if the component you are accessing the context from is not wrapped by a picker.
+     */
+    fieldFormat: string;
 }
-export interface PickerActionsContextValue<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError = string> extends UsePickerValueActionsContextValue<TValue, TError>, UsePickerViewsActionsContextValue<TView> {
+export interface PickerActionsContextValue<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError = string | null> extends UsePickerValueActionsContextValue<TValue, TError>, UsePickerViewsActionsContextValue<TView> {
 }
 export interface PickerPrivateContextValue extends UsePickerValuePrivateContextValue {
     /**

package/internals/components/PickerProvider.js

@@ -1,8 +1,9 @@
 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 { PickerContext } from "../../hooks/usePickerContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const PickerContext = /*#__PURE__*/React.createContext(null);
 export const PickerActionsContext = /*#__PURE__*/React.createContext(null);
 export const PickerPrivateContext = /*#__PURE__*/React.createContext({
   ownerState: {
@@ -28,6 +29,7 @@ export function PickerProvider(props) {
     contextValue,
     actionsContextValue,
     privateContextValue,
+    fieldPrivateContextValue,
     isValidContextValue,
     localeText,
     children
@@ -38,11 +40,14 @@ export function PickerProvider(props) {
       value: actionsContextValue,
       children: /*#__PURE__*/_jsx(PickerPrivateContext.Provider, {
         value: privateContextValue,
-        children: /*#__PURE__*/_jsx(IsValidValueContext.Provider, {
-          value: isValidContextValue,
-          children: /*#__PURE__*/_jsx(LocalizationProvider, {
-            localeText: localeText,
-            children: children
+        children: /*#__PURE__*/_jsx(PickerFieldPrivateContext.Provider, {
+          value: fieldPrivateContextValue,
+          children: /*#__PURE__*/_jsx(IsValidValueContext.Provider, {
+            value: isValidContextValue,
+            children: /*#__PURE__*/_jsx(LocalizationProvider, {
+              localeText: localeText,
+              children: children
+            })
           })
         })
       })

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

@@ -7,6 +7,6 @@ import { DateOrTimeViewWithMeridiem } from '../../models';
  * - DesktopDateTimePicker
  * - DesktopTimePicker
  */
-export declare const useDesktopPicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseDesktopPickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
+export declare const useDesktopPicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, ...pickerParams }: UseDesktopPickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
     renderPicker: () => React.JSX.Element;
 };

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -1,18 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["props", "getOpenDialogAriaText"],
-  _excluded2 = ["ownerState"],
-  _excluded3 = ["ownerState"];
+const _excluded = ["props"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
-import MuiInputAdornment from '@mui/material/InputAdornment';
-import IconButton from '@mui/material/IconButton';
 import useForkRef from '@mui/utils/useForkRef';
 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 { PickerProvider } from "../../components/PickerProvider.js";
+import { PickerFieldUIContextProvider } from "../../components/PickerFieldUI.js";
 
 /**
  * Hook managing all the single-date desktop pickers:
@@ -23,8 +20,7 @@ import { PickerProvider } from "../../components/PickerProvider.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const useDesktopPicker = _ref => {
   let {
-      props,
-      getOpenDialogAriaText
+      props
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
@@ -32,31 +28,21 @@ export const useDesktopPicker = _ref => {
     slotProps: innerSlotProps,
     className,
     sx,
-    format,
-    formatDensity,
-    enableAccessibleFieldDOMStructure,
-    selectedSections,
-    onSelectedSectionsChange,
-    timezone,
     name,
     label,
     inputRef,
     readOnly,
-    disabled,
     autoFocus,
     localeText,
     reduceAnimations
   } = props;
-  const containerRef = React.useRef(null);
   const fieldRef = React.useRef(null);
   const labelId = useId();
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
-    hasUIView,
     providerProps,
     renderCurrentView,
     shouldRestoreFocus,
-    fieldProps: pickerFieldProps,
     ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
@@ -65,39 +51,6 @@ export const useDesktopPicker = _ref => {
     autoFocusView: true,
     variant: 'desktop'
   }));
-  const InputAdornment = slots.inputAdornment ?? MuiInputAdornment;
-  const _useSlotProps = useSlotProps({
-      elementType: InputAdornment,
-      externalSlotProps: innerSlotProps?.inputAdornment,
-      additionalProps: {
-        position: 'end'
-      },
-      ownerState
-    }),
-    inputAdornmentProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
-  const OpenPickerButton = slots.openPickerButton ?? IconButton;
-  const _useSlotProps2 = useSlotProps({
-      elementType: OpenPickerButton,
-      externalSlotProps: innerSlotProps?.openPickerButton,
-      additionalProps: {
-        disabled: disabled || readOnly,
-        // This direct access to `providerProps` will go away in https://github.com/mui/mui-x/pull/15671
-        onClick: event => {
-          event.preventDefault();
-          providerProps.contextValue.setOpen(prevOpen => !prevOpen);
-        },
-        'aria-label': getOpenDialogAriaText(pickerFieldProps.value),
-        edge: inputAdornmentProps.position
-      },
-      ownerState
-    }),
-    openPickerButtonProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded3);
-  const OpenPickerIcon = slots.openPickerIcon;
-  const openPickerIconProps = useSlotProps({
-    elementType: OpenPickerIcon,
-    externalSlotProps: innerSlotProps?.openPickerIcon,
-    ownerState
-  });
   const Field = slots.field;
   const fieldProps = useSlotProps({
     elementType: Field,
@@ -105,17 +58,7 @@ export const useDesktopPicker = _ref => {
     additionalProps: _extends({
       // Internal props
       readOnly,
-      disabled,
-      format,
-      formatDensity,
-      enableAccessibleFieldDOMStructure,
-      selectedSections,
-      onSelectedSectionsChange,
-      timezone,
-      autoFocus: autoFocus && !props.open
-    }, pickerFieldProps, {
-      // onChange and value
-
+      autoFocus: autoFocus && !props.open,
       // Forwarded props
       className,
       sx,
@@ -129,24 +72,6 @@ export const useDesktopPicker = _ref => {
     }),
     ownerState
   });
-
-  // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged
-  if (hasUIView) {
-    fieldProps.InputProps = _extends({}, fieldProps.InputProps, {
-      ref: containerRef
-    }, !props.disableOpenPicker && {
-      [`${inputAdornmentProps.position}Adornment`]: /*#__PURE__*/_jsx(InputAdornment, _extends({}, inputAdornmentProps, {
-        children: /*#__PURE__*/_jsx(OpenPickerButton, _extends({}, openPickerButtonProps, {
-          children: /*#__PURE__*/_jsx(OpenPickerIcon, _extends({}, openPickerIconProps))
-        }))
-      }))
-    });
-  }
-  const slotsForField = _extends({
-    textField: slots.textField,
-    clearIcon: slots.clearIcon,
-    clearButton: slots.clearButton
-  }, fieldProps.slots);
   const Layout = slots.layout ?? PickersLayout;
   let labelledById = labelId;
   if (isToolbarHidden) {
@@ -165,25 +90,27 @@ export const useDesktopPicker = _ref => {
     }, innerSlotProps?.popper)
   });
   const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
-  const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
-    children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
-      slots: slotsForField,
-      slotProps: slotProps,
-      unstableFieldRef: handleFieldRef
-    })), /*#__PURE__*/_jsx(PickersPopper, {
-      role: "dialog",
-      placement: "bottom-start",
-      anchorEl: containerRef.current,
+  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
+    children: /*#__PURE__*/_jsxs(PickerFieldUIContextProvider, {
       slots: slots,
       slotProps: slotProps,
-      shouldRestoreFocus: shouldRestoreFocus,
-      reduceAnimations: reduceAnimations,
-      children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
+        unstableFieldRef: handleFieldRef
+      })), /*#__PURE__*/_jsx(PickersPopper, {
+        role: "dialog",
+        placement: "bottom-start",
+        anchorEl: providerProps.contextValue.triggerRef.current,
         slots: slots,
         slotProps: slotProps,
-        children: renderCurrentView()
-      }))
-    })]
+        shouldRestoreFocus: shouldRestoreFocus,
+        reduceAnimations: reduceAnimations,
+        children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+          slots: slots,
+          slotProps: slotProps,
+          children: renderCurrentView()
+        }))
+      })]
+    })
   }));
   return {
     renderPicker

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

@@ -1,20 +1,16 @@
 import * as React from 'react';
-import type { IconButtonProps } from '@mui/material/IconButton';
-import type { InputAdornmentProps } from '@mui/material/InputAdornment';
-import type { TextFieldProps } from '@mui/material/TextField';
 import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { BaseNonStaticPickerProps, BasePickerProps, BaseNonRangeNonStaticPickerProps } from '../../models/props/basePickerProps';
+import { BasePickerProps, BaseNonRangeNonStaticPickerProps } from '../../models/props/basePickerProps';
 import { PickersPopperSlots, PickersPopperSlotProps } from '../../components/PickersPopper';
 import { UsePickerParams } from '../usePicker';
-import { FieldOwnerState, PickerFieldSlotProps, PickerOwnerState, PickerValidDate } from '../../../models';
+import { PickerFieldSlotProps, PickerOwnerState } from '../../../models';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from '../../../PickersLayout/PickersLayout.types';
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types';
 import { UsePickerViewsProps } from '../usePicker/usePickerViews';
 import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models';
-import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '../../../hooks/useClearableField';
-import { PickersTextFieldProps } from '../../../PickersTextField';
+import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from '../../components/PickerFieldUI';
 import { UsePickerProviderNonStaticProps } from '../usePicker/usePickerProvider';
-export interface UseDesktopPickerSlots extends Pick<PickersPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValue>, UseClearableFieldSlots {
+export interface UseDesktopPickerSlots extends Pick<PickersPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
     /**
      * Component used to enter the date with the keyboard.
      */
@@ -24,31 +20,13 @@ export interface UseDesktopPickerSlots extends Pick<PickersPopperSlots, 'desktop
      * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
      */
     textField?: React.ElementType;
-    /**
-     * Component displayed on the start or end input adornment used to open the picker on desktop.
-     * @default InputAdornment
-     */
-    inputAdornment?: React.ElementType<InputAdornmentProps>;
-    /**
-     * Button to open the picker on desktop.
-     * @default IconButton
-     */
-    openPickerButton?: React.ElementType<IconButtonProps>;
-    /**
-     * Icon displayed in the open picker button on desktop.
-     */
-    openPickerIcon: React.ElementType;
-}
-export interface UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {
 }
-export interface ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickersPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, UseClearableFieldSlotProps {
+export interface ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickersPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
     field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
-    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
-    inputAdornment?: SlotComponentPropsFromProps<InputAdornmentProps, {}, PickerOwnerState>;
-    openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, PickerOwnerState>;
-    openPickerIcon?: SlotComponentPropsFromProps<Record<string, any>, {}, PickerOwnerState>;
 }
-export interface DesktopOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps {
+export interface UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {
+}
+export interface DesktopOnlyPickerProps extends BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps {
     /**
      * If `true`, the `input` element is focused during the first mount.
      * @default false
@@ -69,5 +47,4 @@ export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem,
 }
 export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor'> {
     props: TExternalProps;
-    getOpenDialogAriaText: (date: PickerValidDate | null) => string;
 }