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

package/internals/components/PickerFieldUI.d.ts

@@ -4,129 +4,140 @@ import { IconButtonProps } from '@mui/material/IconButton';
 import { InputAdornmentProps } from '@mui/material/InputAdornment';
 import { SvgIconProps } from '@mui/material/SvgIcon';
 import { MakeOptional, SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { FieldOwnerState } from '../../models';
-import { UseFieldOwnerStateParameters } from '../hooks/useFieldOwnerState';
+import { FieldOwnerState } from "../../models/index.js";
+import { UseFieldOwnerStateParameters } from "../hooks/useFieldOwnerState.js";
 import type { UseFieldResponse } from '../hooks/useField';
-import { PickersTextFieldProps } from '../../PickersTextField';
+import { PickersTextFieldProps } from "../../PickersTextField/index.js";
 export declare const cleanFieldResponse: <TFieldResponse extends MakeOptional<UseFieldResponse<any, ExportedPickerFieldUIProps & {
-    [key: string]: any;
-}>, "onClear" | "clearable">>({ enableAccessibleFieldDOMStructure, ...fieldResponse }: TFieldResponse) => ExportedPickerFieldUIProps & {
-    openPickerAriaLabel: string;
-    textFieldProps: TextFieldProps | PickersTextFieldProps;
+  [key: string]: any;
+}>, "onClear" | "clearable">>({
+  enableAccessibleFieldDOMStructure,
+  ...fieldResponse
+}: TFieldResponse) => ExportedPickerFieldUIProps & {
+  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.
+ * Adds the button to open the Picker and the button to clear the value of the field.
  * @ignore - internal component.
  */
 export declare function PickerFieldUI(props: PickerFieldUIProps): React.JSX.Element;
 export interface ExportedPickerFieldUIProps {
-    /**
-     * If `true`, a clear button will be shown in the field allowing value clearing.
-     * @default false
-     */
-    clearable?: boolean;
-    /**
-     * Callback fired when the clear button is clicked.
-     */
-    onClear?: React.MouseEventHandler;
-    /**
-     * The position at which the clear button is placed.
-     * If the field is not clearable, the button is not rendered.
-     * @default 'end'
-     */
-    clearButtonPosition?: 'start' | 'end';
-    /**
-     * The position at which the opening button is placed.
-     * If there is no picker to open, the button is not rendered
-     * @default 'end'
-     */
-    openPickerButtonPosition?: 'start' | 'end';
+  /**
+   * If `true`, a clear button will be shown in the field allowing value clearing.
+   * @default false
+   */
+  clearable?: boolean;
+  /**
+   * Callback fired when the clear button is clicked.
+   */
+  onClear?: React.MouseEventHandler;
+  /**
+   * The position at which the clear button is placed.
+   * If the field is not clearable, the button is not rendered.
+   * @default 'end'
+   */
+  clearButtonPosition?: 'start' | 'end';
+  /**
+   * The position at which the opening button is placed.
+   * If there is no Picker to open, the button is not rendered
+   * @default 'end'
+   */
+  openPickerButtonPosition?: 'start' | 'end';
 }
 export interface PickerFieldUIProps {
-    /**
-     * Overridable component slots.
-     * @default {}
-     */
-    slots?: PickerFieldUISlots;
-    /**
-     * The props used for each component slot.
-     * @default {}
-     */
-    slotProps?: PickerFieldUISlotProps;
-    /**
-     * Object returned by the `useField` hook or one of its wrapper (for example `useDateField`).
-     */
-    fieldResponse: UseFieldResponse<any, any>;
-    /**
-     * The component to use to render the picker opening icon if none is provided in the picker's slots.
-     */
-    defaultOpenPickerIcon: React.ElementType;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PickerFieldUISlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PickerFieldUISlotProps;
+  /**
+   * Object returned by the `useField` hook or one of its wrapper (for example `useDateField`).
+   */
+  fieldResponse: UseFieldResponse<any, any>;
+  /**
+   * The component to use to render the Picker opening icon if none is provided in the Picker's slots.
+   */
+  defaultOpenPickerIcon: React.ElementType;
 }
 export interface PickerFieldUISlots {
-    /**
-     * Form control with an input to render the value.
-     * @default <PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
-     */
-    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>;
-    /**
-     * Icon to display inside the clear button.
-     * @default ClearIcon
-     */
-    clearIcon?: React.ElementType;
-    /**
-     * Button to clear the value.
-     * @default IconButton
-     */
-    clearButton?: React.ElementType;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<InputAdornmentProps>;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
 }
 export interface PickerFieldUISlotsFromContext extends PickerFieldUISlots {
-    /**
-     * 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;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<IconButtonProps>;
+  /**
+   * Icon to display in the button used to open the Picker.
+   */
+  openPickerIcon?: React.ElementType;
 }
 export interface PickerFieldUISlotProps {
-    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
-    inputAdornment?: SlotComponentPropsFromProps<InputAdornmentProps, {}, FieldInputAdornmentOwnerState>;
-    clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
-    clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<InputAdornmentProps, {}, FieldInputAdornmentOwnerState>;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
 }
 export interface PickerFieldUISlotPropsFromContext extends PickerFieldUISlotProps {
-    openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
-    openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
 }
 interface FieldInputAdornmentOwnerState extends FieldOwnerState {
-    position: 'start' | 'end';
+  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.
  */
 export declare function useFieldTextFieldProps<TProps extends UseFieldOwnerStateParameters & {
-    inputProps?: {};
-    InputProps?: {};
+  inputProps?: {};
+  InputProps?: {};
 }>(parameters: UseFieldTextFieldPropsParameters): TProps;
 interface UseFieldTextFieldPropsParameters {
-    slotProps: {
-        textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
-    } | undefined;
-    ref: React.Ref<HTMLDivElement>;
-    externalForwardedProps: any;
+  slotProps: {
+    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
+  } | undefined;
+  ref: React.Ref<HTMLDivElement>;
+  externalForwardedProps: any;
 }
 export declare function PickerFieldUIContextProvider(props: PickerFieldUIContextProviderProps): React.JSX.Element;
 interface PickerFieldUIContextProviderProps {
-    children: React.ReactNode;
-    slots: PickerFieldUISlotsFromContext | undefined;
-    slotProps: PickerFieldUISlotPropsFromContext | undefined;
+  children: React.ReactNode;
+  inputRef: React.Ref<HTMLInputElement> | undefined;
+  slots: PickerFieldUISlotsFromContext | undefined;
+  slotProps: PickerFieldUISlotPropsFromContext | undefined;
 }
-export {};
+export {};

package/internals/components/PickerFieldUI.js

@@ -1,5 +1,32 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PickerFieldUI = PickerFieldUI;
+exports.PickerFieldUIContext = void 0;
+exports.PickerFieldUIContextProvider = PickerFieldUIContextProvider;
+exports.cleanFieldResponse = void 0;
+exports.mergeSlotProps = mergeSlotProps;
+exports.useFieldTextFieldProps = useFieldTextFieldProps;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveComponentProps"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
+var _useSlotProps5 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _useFieldOwnerState = require("../hooks/useFieldOwnerState");
+var _hooks = require("../../hooks");
+var _icons = require("../../icons");
+var _useNullablePickerContext = require("../hooks/useNullablePickerContext");
+var _PickersTextField = require("../../PickersTextField");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["enableAccessibleFieldDOMStructure"],
   _excluded2 = ["InputProps", "readOnly", "onClear", "clearable", "clearButtonPosition", "openPickerButtonPosition", "openPickerAriaLabel"],
   _excluded3 = ["onPaste", "onKeyDown", "inputMode", "readOnly", "InputProps", "inputProps", "inputRef", "onClear", "clearable", "clearButtonPosition", "openPickerButtonPosition", "openPickerAriaLabel"],
@@ -8,24 +35,11 @@ const _excluded = ["enableAccessibleFieldDOMStructure"],
   _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 => {
+const cleanFieldResponse = _ref => {
   let {
       enableAccessibleFieldDOMStructure
     } = _ref,
-    fieldResponse = _objectWithoutPropertiesLoose(_ref, _excluded);
+    fieldResponse = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   if (enableAccessibleFieldDOMStructure) {
     const {
         InputProps,
@@ -36,15 +50,15 @@ export const cleanFieldResponse = _ref => {
         openPickerButtonPosition,
         openPickerAriaLabel
       } = fieldResponse,
-      other = _objectWithoutPropertiesLoose(fieldResponse, _excluded2);
+      other = (0, _objectWithoutPropertiesLoose2.default)(fieldResponse, _excluded2);
     return {
       clearable,
       onClear,
       clearButtonPosition,
       openPickerButtonPosition,
       openPickerAriaLabel,
-      textFieldProps: _extends({}, other, {
-        InputProps: _extends({}, InputProps ?? {}, {
+      textFieldProps: (0, _extends2.default)({}, other, {
+        InputProps: (0, _extends2.default)({}, InputProps ?? {}, {
           readOnly
         })
       })
@@ -64,18 +78,18 @@ export const cleanFieldResponse = _ref => {
       openPickerButtonPosition,
       openPickerAriaLabel
     } = fieldResponse,
-    other = _objectWithoutPropertiesLoose(fieldResponse, _excluded3);
+    other = (0, _objectWithoutPropertiesLoose2.default)(fieldResponse, _excluded3);
   return {
     clearable,
     onClear,
     clearButtonPosition,
     openPickerButtonPosition,
     openPickerAriaLabel,
-    textFieldProps: _extends({}, other, {
-      InputProps: _extends({}, InputProps ?? {}, {
+    textFieldProps: (0, _extends2.default)({}, other, {
+      InputProps: (0, _extends2.default)({}, InputProps ?? {}, {
         readOnly
       }),
-      inputProps: _extends({}, inputProps ?? {}, {
+      inputProps: (0, _extends2.default)({}, inputProps ?? {}, {
         inputMode,
         onPaste,
         onKeyDown,
@@ -84,24 +98,26 @@ export const cleanFieldResponse = _ref => {
     })
   };
 };
-const PickerFieldUIContext = /*#__PURE__*/React.createContext({
+exports.cleanFieldResponse = cleanFieldResponse;
+const PickerFieldUIContext = exports.PickerFieldUIContext = /*#__PURE__*/React.createContext({
   slots: {},
-  slotProps: {}
+  slotProps: {},
+  inputRef: undefined
 });
 
 /**
- * Adds the button to open the picker and the button to clear the value of the field.
+ * Adds the button to open the Picker and the button to clear the value of the field.
  * @ignore - internal component.
  */
-export function PickerFieldUI(props) {
+function PickerFieldUI(props) {
   const {
     slots,
     slotProps,
     fieldResponse,
     defaultOpenPickerIcon
   } = props;
-  const translations = usePickerTranslations();
-  const pickerContext = useNullablePickerContext();
+  const translations = (0, _hooks.usePickerTranslations)();
+  const pickerContext = (0, _useNullablePickerContext.useNullablePickerContext)();
   const pickerFieldUIContext = React.useContext(PickerFieldUIContext);
   const {
     textFieldProps,
@@ -111,61 +127,63 @@ export function PickerFieldUI(props) {
     clearButtonPosition: clearButtonPositionProp = 'end',
     openPickerButtonPosition: openPickerButtonPositionProp = 'end'
   } = cleanFieldResponse(fieldResponse);
-  const ownerState = useFieldOwnerState(textFieldProps);
-  const handleClickOpeningButton = useEventCallback(event => {
+  const ownerState = (0, _useFieldOwnerState.useFieldOwnerState)(textFieldProps);
+  const handleClickOpeningButton = (0, _useEventCallback.default)(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({
+  const TextField = slots?.textField ?? pickerFieldUIContext.slots.textField ?? (fieldResponse.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
+  const InputAdornment = slots?.inputAdornment ?? pickerFieldUIContext.slots.inputAdornment ?? _InputAdornment.default;
+  const _useSlotProps = (0, _useSlotProps5.default)({
       elementType: InputAdornment,
       externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.inputAdornment, slotProps?.inputAdornment),
       additionalProps: {
         position: 'start'
       },
-      ownerState: _extends({}, ownerState, {
+      ownerState: (0, _extends2.default)({}, ownerState, {
         position: 'start'
       })
     }),
-    startInputAdornmentProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded4);
-  const _useSlotProps2 = useSlotProps({
+    startInputAdornmentProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded4);
+  const _useSlotProps2 = (0, _useSlotProps5.default)({
       elementType: InputAdornment,
       externalSlotProps: slotProps?.inputAdornment,
       additionalProps: {
         position: 'end'
       },
-      ownerState: _extends({}, ownerState, {
+      ownerState: (0, _extends2.default)({}, ownerState, {
         position: 'end'
       })
     }),
-    endInputAdornmentProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded5);
-  const OpenPickerButton = pickerFieldUIContext.slots.openPickerButton ?? MuiIconButton;
+    endInputAdornmentProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps2, _excluded5);
+  const OpenPickerButton = pickerFieldUIContext.slots.openPickerButton ?? _IconButton.default;
   // We don't want to forward the `ownerState` to the `<IconButton />` component, see mui/material-ui#34056
-  const _useSlotProps3 = useSlotProps({
+  const _useSlotProps3 = (0, _useSlotProps5.default)({
       elementType: OpenPickerButton,
       externalSlotProps: pickerFieldUIContext.slotProps.openPickerButton,
       additionalProps: {
         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
     }),
-    openPickerButtonProps = _objectWithoutPropertiesLoose(_useSlotProps3, _excluded6);
+    openPickerButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps3, _excluded6);
   const OpenPickerIcon = pickerFieldUIContext.slots.openPickerIcon ?? defaultOpenPickerIcon;
-  const openPickerIconProps = useSlotProps({
+  const openPickerIconProps = (0, _useSlotProps5.default)({
     elementType: OpenPickerIcon,
     externalSlotProps: pickerFieldUIContext.slotProps.openPickerIcon,
     ownerState
   });
-  const ClearButton = slots?.clearButton ?? pickerFieldUIContext.slots.clearButton ?? MuiIconButton;
+  const ClearButton = slots?.clearButton ?? pickerFieldUIContext.slots.clearButton ?? _IconButton.default;
   // We don't want to forward the `ownerState` to the `<IconButton />` component, see mui/material-ui#34056
-  const _useSlotProps4 = useSlotProps({
+  const _useSlotProps4 = (0, _useSlotProps5.default)({
       elementType: ClearButton,
       externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.clearButton, slotProps?.clearButton),
       className: 'clearButton',
@@ -174,13 +192,15 @@ 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
     }),
-    clearButtonProps = _objectWithoutPropertiesLoose(_useSlotProps4, _excluded7);
-  const ClearIcon = slots?.clearIcon ?? pickerFieldUIContext.slots.clearIcon ?? MuiClearIcon;
-  const clearIconProps = useSlotProps({
+    clearButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps4, _excluded7);
+  const ClearIcon = slots?.clearIcon ?? pickerFieldUIContext.slots.clearIcon ?? _icons.ClearIcon;
+  const clearIconProps = (0, _useSlotProps5.default)({
     elementType: ClearIcon,
     externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.clearIcon, slotProps?.clearIcon),
     additionalProps: {
@@ -188,6 +208,7 @@ export function PickerFieldUI(props) {
     },
     ownerState
   });
+  textFieldProps.ref = (0, _useForkRef.default)(textFieldProps.ref, pickerContext?.rootRef);
   if (!textFieldProps.InputProps) {
     textFieldProps.InputProps = {};
   }
@@ -195,20 +216,20 @@ export function PickerFieldUI(props) {
     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))
+    textFieldProps.InputProps.startAdornment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(InputAdornment, (0, _extends2.default)({}, startInputAdornmentProps, {
+      children: [openPickerButtonPosition === 'start' && /*#__PURE__*/(0, _jsxRuntime.jsx)(OpenPickerButton, (0, _extends2.default)({}, openPickerButtonProps, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OpenPickerIcon, (0, _extends2.default)({}, openPickerIconProps))
+      })), clearButtonPosition === 'start' && /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearButton, (0, _extends2.default)({}, clearButtonProps, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearIcon, (0, _extends2.default)({}, 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))
+    textFieldProps.InputProps.endAdornment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(InputAdornment, (0, _extends2.default)({}, endInputAdornmentProps, {
+      children: [clearButtonPosition === 'end' && /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearButton, (0, _extends2.default)({}, clearButtonProps, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearIcon, (0, _extends2.default)({}, clearIconProps))
+      })), openPickerButtonPosition === 'end' && /*#__PURE__*/(0, _jsxRuntime.jsx)(OpenPickerButton, (0, _extends2.default)({}, openPickerButtonProps, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OpenPickerIcon, (0, _extends2.default)({}, openPickerIconProps))
       }))]
     }));
   }
@@ -229,7 +250,7 @@ export function PickerFieldUI(props) {
       }
     }, ...(Array.isArray(textFieldProps.sx) ? textFieldProps.sx : [textFieldProps.sx])];
   }
-  return /*#__PURE__*/_jsx(TextField, _extends({}, textFieldProps));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({}, textFieldProps));
 }
 function mergeSlotProps(slotPropsA, slotPropsB) {
   if (!slotPropsA) {
@@ -239,7 +260,7 @@ function mergeSlotProps(slotPropsA, slotPropsB) {
     return slotPropsA;
   }
   return ownerState => {
-    return _extends({}, resolveComponentProps(slotPropsB, ownerState), resolveComponentProps(slotPropsA, ownerState));
+    return (0, _extends2.default)({}, (0, _resolveComponentProps.default)(slotPropsB, ownerState), (0, _resolveComponentProps.default)(slotPropsA, ownerState));
   };
 }
 
@@ -247,41 +268,49 @@ function mergeSlotProps(slotPropsA, slotPropsB) {
  * 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) {
+function useFieldTextFieldProps(parameters) {
   const {
     ref,
     externalForwardedProps,
     slotProps
   } = parameters;
   const pickerFieldUIContext = React.useContext(PickerFieldUIContext);
-  const ownerState = useFieldOwnerState(externalForwardedProps);
+  const pickerContext = (0, _useNullablePickerContext.useNullablePickerContext)();
+  const ownerState = (0, _useFieldOwnerState.useFieldOwnerState)(externalForwardedProps);
   const {
       InputProps,
       inputProps
     } = externalForwardedProps,
-    otherExternalForwardedProps = _objectWithoutPropertiesLoose(externalForwardedProps, _excluded8);
-  const textFieldProps = useSlotProps({
-    elementType: PickersTextField,
+    otherExternalForwardedProps = (0, _objectWithoutPropertiesLoose2.default)(externalForwardedProps, _excluded8);
+  const textFieldProps = (0, _useSlotProps5.default)({
+    elementType: _PickersTextField.PickersTextField,
     externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.textField, slotProps?.textField),
     externalForwardedProps: otherExternalForwardedProps,
     additionalProps: {
-      ref
+      ref,
+      sx: pickerContext?.rootSx,
+      label: pickerContext?.label,
+      name: pickerContext?.name,
+      className: pickerContext?.rootClassName,
+      inputRef: pickerFieldUIContext.inputRef
     },
     ownerState
   });
 
   // TODO: Remove when mui/material-ui#35088 will be merged
-  textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
-  textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
+  textFieldProps.inputProps = (0, _extends2.default)({}, inputProps, textFieldProps.inputProps);
+  textFieldProps.InputProps = (0, _extends2.default)({}, InputProps, textFieldProps.InputProps);
   return textFieldProps;
 }
-export function PickerFieldUIContextProvider(props) {
+function PickerFieldUIContextProvider(props) {
   const {
     slots = {},
     slotProps = {},
+    inputRef,
     children
   } = props;
   const contextValue = React.useMemo(() => ({
+    inputRef,
     slots: {
       openPickerButton: slots.openPickerButton,
       openPickerIcon: slots.openPickerIcon,
@@ -298,8 +327,8 @@ export function PickerFieldUIContextProvider(props) {
       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, {
+  }), [inputRef, 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__*/(0, _jsxRuntime.jsx)(PickerFieldUIContext.Provider, {
     value: contextValue,
     children: children
   });