@mui/x-date-pickers 9.0.0-alpha.4 → 9.0.0

package/PickersTextField/PickersTextField.js

@@ -11,10 +11,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _clsx = _interopRequireDefault(require("clsx"));
+var _warning = require("@mui/x-internals/warning");
 var _styles = require("@mui/material/styles");
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
@@ -27,7 +28,7 @@ var _PickersInput = require("./PickersInput");
 var _useFieldOwnerState = require("../internals/hooks/useFieldOwnerState");
 var _usePickerTextFieldOwnerState = require("./usePickerTextFieldOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "hiddenLabel", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps", "data-active-range-position"];
+const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "hiddenLabel", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "label", "slots", "slotProps", "data-active-range-position"];
 const VARIANT_COMPONENT = {
   standard: _PickersInput.PickersInput,
   filled: _PickersFilledInput.PickersFilledInput,
@@ -55,6 +56,14 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
     props: inProps,
     name: 'MuiPickersTextField'
   });
+
+  // TODO v10: remove
+  if (process.env.NODE_ENV !== 'production') {
+    const legacyProps = inProps;
+    if (legacyProps.InputProps || legacyProps.inputProps || legacyProps.InputLabelProps || legacyProps.FormHelperTextProps) {
+      (0, _warning.warnOnce)(['MUI X: `PickersTextField` no longer supports the `InputProps`, `inputProps`, `InputLabelProps` and `FormHelperTextProps` props.', 'They are silently dropped, which can hide configuration bugs in JavaScript codebases that do not benefit from TypeScript checks.', 'Use `slotProps.input`, `slotProps.htmlInput`, `slotProps.inputLabel` and `slotProps.formHelperText` instead.', 'You can run the `migrate-text-field-props` codemod to migrate automatically.']);
+    }
+  }
   const {
       // Props used by FormControl
       onFocus,
@@ -68,8 +77,6 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
       required = false,
       hiddenLabel = false,
       // Props used by PickersInput
-      InputProps,
-      inputProps,
       inputRef,
       sectionListRef,
       elements,
@@ -91,10 +98,11 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
       name,
       // Props used by FormHelperText
       helperText,
-      FormHelperTextProps,
       // Props used by InputLabel
       label,
-      InputLabelProps,
+      // Slot system
+      slots,
+      slotProps,
       // @ts-ignore
       'data-active-range-position': dataActiveRangePosition
     } = props,
@@ -104,10 +112,12 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
   const id = (0, _useId.default)(idProp);
   const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
   const inputLabelId = label && id ? `${id}-label` : undefined;
+  const inputSlotProps = slotProps?.input;
+  const inputLabelSlotProps = slotProps?.inputLabel;
   const fieldOwnerState = (0, _useFieldOwnerState.useFieldOwnerState)({
     disabled: props.disabled,
     required: props.required,
-    readOnly: InputProps?.readOnly
+    readOnly: inputSlotProps?.readOnly
   });
   const ownerState = React.useMemo(() => (0, _extends2.default)({}, fieldOwnerState, {
     isFieldValueEmpty: areAllSectionsEmpty,
@@ -116,40 +126,51 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
     inputSize: props.size ?? 'medium',
     inputColor: color ?? 'primary',
     isInputInFullWidth: fullWidth ?? false,
-    hasStartAdornment: Boolean(startAdornment ?? InputProps?.startAdornment),
-    hasEndAdornment: Boolean(endAdornment ?? InputProps?.endAdornment),
+    hasStartAdornment: Boolean(startAdornment ?? inputSlotProps?.startAdornment),
+    hasEndAdornment: Boolean(endAdornment ?? inputSlotProps?.endAdornment),
     inputHasLabel: !!label,
-    isLabelShrunk: Boolean(InputLabelProps?.shrink)
-  }), [fieldOwnerState, areAllSectionsEmpty, focused, error, props.size, color, fullWidth, startAdornment, endAdornment, InputProps?.startAdornment, InputProps?.endAdornment, label, InputLabelProps?.shrink]);
+    isLabelShrunk: Boolean(inputLabelSlotProps?.shrink)
+  }), [fieldOwnerState, areAllSectionsEmpty, focused, error, props.size, color, fullWidth, startAdornment, endAdornment, inputSlotProps?.startAdornment, inputSlotProps?.endAdornment, label, inputLabelSlotProps?.shrink]);
   const classes = useUtilityClasses(classesProp, ownerState);
-  const PickersInputComponent = VARIANT_COMPONENT[variant];
+  const PickersInputComponent = slots?.input ?? VARIANT_COMPONENT[variant];
+  const RootComponent = slots?.root ?? PickersTextFieldRoot;
+  const InputLabelComponent = slots?.inputLabel ?? _InputLabel.default;
+  const FormHelperTextComponent = slots?.formHelperText ?? _FormHelperText.default;
   const inputAdditionalProps = {};
   if (variant === 'outlined') {
-    if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
-      inputAdditionalProps.notched = InputLabelProps.shrink;
+    if (inputLabelSlotProps && typeof inputLabelSlotProps.shrink !== 'undefined') {
+      inputAdditionalProps.notched = inputLabelSlotProps.shrink;
     }
     inputAdditionalProps.label = label;
   } else if (variant === 'filled') {
     inputAdditionalProps.hiddenLabel = hiddenLabel;
   }
+  const rootSlotProps = (0, _useSlotProps.default)({
+    elementType: RootComponent,
+    externalSlotProps: slotProps?.root,
+    externalForwardedProps: (0, _extends2.default)({}, other, {
+      className
+    }),
+    additionalProps: {
+      ref: handleRootRef,
+      focused,
+      disabled,
+      variant,
+      error,
+      color,
+      fullWidth,
+      required
+    },
+    className: classes.root,
+    ownerState
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_usePickerTextFieldOwnerState.PickerTextFieldOwnerStateContext.Provider, {
     value: ownerState,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersTextFieldRoot, (0, _extends2.default)({
-      className: (0, _clsx.default)(classes.root, className),
-      ref: handleRootRef,
-      focused: focused,
-      disabled: disabled,
-      variant: variant,
-      error: error,
-      color: color,
-      fullWidth: fullWidth,
-      required: required,
-      ownerState: ownerState
-    }, other, {
-      children: [label != null && label !== '' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, (0, _extends2.default)({
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootComponent, (0, _extends2.default)({}, rootSlotProps, {
+      children: [label != null && label !== '' && /*#__PURE__*/(0, _jsxRuntime.jsx)(InputLabelComponent, (0, _extends2.default)({
         htmlFor: id,
         id: inputLabelId
-      }, InputLabelProps, {
+      }, inputLabelSlotProps, {
         children: label
       })), /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersInputComponent, (0, _extends2.default)({
         elements: elements,
@@ -169,7 +190,6 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
         onChange: onChange,
         id: id,
         fullWidth: fullWidth,
-        inputProps: inputProps,
         inputRef: inputRef,
         sectionListRef: sectionListRef,
         label: label,
@@ -179,9 +199,16 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
         "aria-describedby": helperTextId,
         "aria-live": helperTextId ? 'polite' : undefined,
         "data-active-range-position": dataActiveRangePosition
-      }, inputAdditionalProps, InputProps)), helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormHelperText.default, (0, _extends2.default)({
+      }, inputAdditionalProps, inputSlotProps, {
+        slots: (0, _extends2.default)({}, inputSlotProps?.slots, slots?.htmlInput !== undefined && {
+          htmlInput: slots.htmlInput
+        }),
+        slotProps: (0, _extends2.default)({}, inputSlotProps?.slotProps, slotProps?.htmlInput !== undefined && {
+          htmlInput: slotProps.htmlInput
+        })
+      })), helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(FormHelperTextComponent, (0, _extends2.default)({
         id: helperTextId
-      }, FormHelperTextProps, {
+      }, slotProps?.formHelperText, {
         children: helperText
       }))]
     }))
@@ -224,13 +251,23 @@ process.env.NODE_ENV !== "production" ? PickersTextField.propTypes = {
     container: _propTypes.default.object.isRequired,
     content: _propTypes.default.object.isRequired
   })).isRequired,
+  /**
+   * End `InputAdornment` for this component.
+   */
   endAdornment: _propTypes.default.node,
+  /**
+   * If `true`, the `input` will indicate an error.
+   * @default false
+   */
   error: _propTypes.default.bool.isRequired,
   /**
    * If `true`, the component is displayed in focused state.
    */
   focused: _propTypes.default.bool,
-  FormHelperTextProps: _propTypes.default.object,
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
   fullWidth: _propTypes.default.bool,
   /**
    * The helper text content.
@@ -243,23 +280,26 @@ process.env.NODE_ENV !== "production" ? PickersTextField.propTypes = {
    * @default false
    */
   hiddenLabel: _propTypes.default.bool,
+  /**
+   * The id of the `input` element.
+   */
   id: _propTypes.default.string,
-  InputLabelProps: _propTypes.default.object,
-  inputProps: _propTypes.default.object,
   /**
-   * Props applied to the Input element.
-   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
-   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
-   * component depending on the `variant` prop value.
+   * Pass a ref to the `input` element.
    */
-  InputProps: _propTypes.default.object,
   inputRef: _refType.default,
+  /**
+   * The label content.
+   */
   label: _propTypes.default.node,
   /**
    * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
    * @default 'none'
    */
   margin: _propTypes.default.oneOf(['dense', 'none', 'normal']),
+  /**
+   * Name attribute of the `input` element.
+   */
   name: _propTypes.default.string,
   onBlur: _propTypes.default.func.isRequired,
   onChange: _propTypes.default.func.isRequired,
@@ -287,6 +327,19 @@ process.env.NODE_ENV !== "production" ? PickersTextField.propTypes = {
    * @default 'medium'
    */
   size: _propTypes.default.oneOf(['medium', 'small']),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
+  /**
+   * Start `InputAdornment` for this component.
+   */
   startAdornment: _propTypes.default.node,
   style: _propTypes.default.object,
   /**

package/PickersTextField/PickersTextField.mjs

@@ -2,13 +2,14 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "hiddenLabel", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps", "data-active-range-position"];
+const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "hiddenLabel", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "label", "slots", "slotProps", "data-active-range-position"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
+import { warnOnce } from '@mui/x-internals/warning';
 import { styled, useThemeProps } from '@mui/material/styles';
 import refType from '@mui/utils/refType';
 import useForkRef from '@mui/utils/useForkRef';
+import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
 import InputLabel from '@mui/material/InputLabel';
@@ -48,6 +49,14 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
     props: inProps,
     name: 'MuiPickersTextField'
   });
+
+  // TODO v10: remove
+  if (process.env.NODE_ENV !== 'production') {
+    const legacyProps = inProps;
+    if (legacyProps.InputProps || legacyProps.inputProps || legacyProps.InputLabelProps || legacyProps.FormHelperTextProps) {
+      warnOnce(['MUI X: `PickersTextField` no longer supports the `InputProps`, `inputProps`, `InputLabelProps` and `FormHelperTextProps` props.', 'They are silently dropped, which can hide configuration bugs in JavaScript codebases that do not benefit from TypeScript checks.', 'Use `slotProps.input`, `slotProps.htmlInput`, `slotProps.inputLabel` and `slotProps.formHelperText` instead.', 'You can run the `migrate-text-field-props` codemod to migrate automatically.']);
+    }
+  }
   const {
       // Props used by FormControl
       onFocus,
@@ -61,8 +70,6 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
       required = false,
       hiddenLabel = false,
       // Props used by PickersInput
-      InputProps,
-      inputProps,
       inputRef,
       sectionListRef,
       elements,
@@ -84,10 +91,11 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
       name,
       // Props used by FormHelperText
       helperText,
-      FormHelperTextProps,
       // Props used by InputLabel
       label,
-      InputLabelProps,
+      // Slot system
+      slots,
+      slotProps,
       // @ts-ignore
       'data-active-range-position': dataActiveRangePosition
     } = props,
@@ -97,10 +105,12 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
   const id = useId(idProp);
   const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
   const inputLabelId = label && id ? `${id}-label` : undefined;
+  const inputSlotProps = slotProps?.input;
+  const inputLabelSlotProps = slotProps?.inputLabel;
   const fieldOwnerState = useFieldOwnerState({
     disabled: props.disabled,
     required: props.required,
-    readOnly: InputProps?.readOnly
+    readOnly: inputSlotProps?.readOnly
   });
   const ownerState = React.useMemo(() => _extends({}, fieldOwnerState, {
     isFieldValueEmpty: areAllSectionsEmpty,
@@ -109,40 +119,51 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
     inputSize: props.size ?? 'medium',
     inputColor: color ?? 'primary',
     isInputInFullWidth: fullWidth ?? false,
-    hasStartAdornment: Boolean(startAdornment ?? InputProps?.startAdornment),
-    hasEndAdornment: Boolean(endAdornment ?? InputProps?.endAdornment),
+    hasStartAdornment: Boolean(startAdornment ?? inputSlotProps?.startAdornment),
+    hasEndAdornment: Boolean(endAdornment ?? inputSlotProps?.endAdornment),
     inputHasLabel: !!label,
-    isLabelShrunk: Boolean(InputLabelProps?.shrink)
-  }), [fieldOwnerState, areAllSectionsEmpty, focused, error, props.size, color, fullWidth, startAdornment, endAdornment, InputProps?.startAdornment, InputProps?.endAdornment, label, InputLabelProps?.shrink]);
+    isLabelShrunk: Boolean(inputLabelSlotProps?.shrink)
+  }), [fieldOwnerState, areAllSectionsEmpty, focused, error, props.size, color, fullWidth, startAdornment, endAdornment, inputSlotProps?.startAdornment, inputSlotProps?.endAdornment, label, inputLabelSlotProps?.shrink]);
   const classes = useUtilityClasses(classesProp, ownerState);
-  const PickersInputComponent = VARIANT_COMPONENT[variant];
+  const PickersInputComponent = slots?.input ?? VARIANT_COMPONENT[variant];
+  const RootComponent = slots?.root ?? PickersTextFieldRoot;
+  const InputLabelComponent = slots?.inputLabel ?? InputLabel;
+  const FormHelperTextComponent = slots?.formHelperText ?? FormHelperText;
   const inputAdditionalProps = {};
   if (variant === 'outlined') {
-    if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
-      inputAdditionalProps.notched = InputLabelProps.shrink;
+    if (inputLabelSlotProps && typeof inputLabelSlotProps.shrink !== 'undefined') {
+      inputAdditionalProps.notched = inputLabelSlotProps.shrink;
     }
     inputAdditionalProps.label = label;
   } else if (variant === 'filled') {
     inputAdditionalProps.hiddenLabel = hiddenLabel;
   }
+  const rootSlotProps = useSlotProps({
+    elementType: RootComponent,
+    externalSlotProps: slotProps?.root,
+    externalForwardedProps: _extends({}, other, {
+      className
+    }),
+    additionalProps: {
+      ref: handleRootRef,
+      focused,
+      disabled,
+      variant,
+      error,
+      color,
+      fullWidth,
+      required
+    },
+    className: classes.root,
+    ownerState
+  });
   return /*#__PURE__*/_jsx(PickerTextFieldOwnerStateContext.Provider, {
     value: ownerState,
-    children: /*#__PURE__*/_jsxs(PickersTextFieldRoot, _extends({
-      className: clsx(classes.root, className),
-      ref: handleRootRef,
-      focused: focused,
-      disabled: disabled,
-      variant: variant,
-      error: error,
-      color: color,
-      fullWidth: fullWidth,
-      required: required,
-      ownerState: ownerState
-    }, other, {
-      children: [label != null && label !== '' && /*#__PURE__*/_jsx(InputLabel, _extends({
+    children: /*#__PURE__*/_jsxs(RootComponent, _extends({}, rootSlotProps, {
+      children: [label != null && label !== '' && /*#__PURE__*/_jsx(InputLabelComponent, _extends({
         htmlFor: id,
         id: inputLabelId
-      }, InputLabelProps, {
+      }, inputLabelSlotProps, {
         children: label
       })), /*#__PURE__*/_jsx(PickersInputComponent, _extends({
         elements: elements,
@@ -162,7 +183,6 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
         onChange: onChange,
         id: id,
         fullWidth: fullWidth,
-        inputProps: inputProps,
         inputRef: inputRef,
         sectionListRef: sectionListRef,
         label: label,
@@ -172,9 +192,16 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
         "aria-describedby": helperTextId,
         "aria-live": helperTextId ? 'polite' : undefined,
         "data-active-range-position": dataActiveRangePosition
-      }, inputAdditionalProps, InputProps)), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
+      }, inputAdditionalProps, inputSlotProps, {
+        slots: _extends({}, inputSlotProps?.slots, slots?.htmlInput !== undefined && {
+          htmlInput: slots.htmlInput
+        }),
+        slotProps: _extends({}, inputSlotProps?.slotProps, slotProps?.htmlInput !== undefined && {
+          htmlInput: slotProps.htmlInput
+        })
+      })), helperText && /*#__PURE__*/_jsx(FormHelperTextComponent, _extends({
         id: helperTextId
-      }, FormHelperTextProps, {
+      }, slotProps?.formHelperText, {
         children: helperText
       }))]
     }))
@@ -217,13 +244,23 @@ process.env.NODE_ENV !== "production" ? PickersTextField.propTypes = {
     container: PropTypes.object.isRequired,
     content: PropTypes.object.isRequired
   })).isRequired,
+  /**
+   * End `InputAdornment` for this component.
+   */
   endAdornment: PropTypes.node,
+  /**
+   * If `true`, the `input` will indicate an error.
+   * @default false
+   */
   error: PropTypes.bool.isRequired,
   /**
    * If `true`, the component is displayed in focused state.
    */
   focused: PropTypes.bool,
-  FormHelperTextProps: PropTypes.object,
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
   fullWidth: PropTypes.bool,
   /**
    * The helper text content.
@@ -236,23 +273,26 @@ process.env.NODE_ENV !== "production" ? PickersTextField.propTypes = {
    * @default false
    */
   hiddenLabel: PropTypes.bool,
+  /**
+   * The id of the `input` element.
+   */
   id: PropTypes.string,
-  InputLabelProps: PropTypes.object,
-  inputProps: PropTypes.object,
   /**
-   * Props applied to the Input element.
-   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
-   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
-   * component depending on the `variant` prop value.
+   * Pass a ref to the `input` element.
    */
-  InputProps: PropTypes.object,
   inputRef: refType,
+  /**
+   * The label content.
+   */
   label: PropTypes.node,
   /**
    * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
    * @default 'none'
    */
   margin: PropTypes.oneOf(['dense', 'none', 'normal']),
+  /**
+   * Name attribute of the `input` element.
+   */
   name: PropTypes.string,
   onBlur: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
@@ -280,6 +320,19 @@ process.env.NODE_ENV !== "production" ? PickersTextField.propTypes = {
    * @default 'medium'
    */
   size: PropTypes.oneOf(['medium', 'small']),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.object,
+  /**
+   * Start `InputAdornment` for this component.
+   */
   startAdornment: PropTypes.node,
   style: PropTypes.object,
   /**

package/PickersTextField/PickersTextField.types.d.mts

@@ -3,65 +3,93 @@ import { FormControlProps } from '@mui/material/FormControl';
 import { FormHelperTextProps } from '@mui/material/FormHelperText';
 import { InputLabelProps } from '@mui/material/InputLabel';
 import { TextFieldVariants } from '@mui/material/TextField';
-import { PickersInputPropsUsedByField } from "./PickersInputBase/PickersInputBase.types.mjs";
+import { PickersInputBaseProps, PickersInputPropsUsedByField } from "./PickersInputBase/PickersInputBase.types.mjs";
 import type { PickersInputProps } from "./PickersInput/index.mjs";
 import type { PickersOutlinedInputProps } from "./PickersOutlinedInput/index.mjs";
 import type { PickersFilledInputProps } from "./PickersFilledInput/index.mjs";
+export interface PickersTextFieldSlots {
+  /**
+   * The component used for the root slot.
+   * @default FormControl
+   */
+  root?: React.ElementType;
+  /**
+   * The component used for the input slot.
+   * Defaults to one of `PickersInput`, `PickersFilledInput`, `PickersOutlinedInput` based on `variant`.
+   * @default PickersOutlinedInput
+   */
+  input?: React.ElementType;
+  /**
+   * The component used for the input label slot.
+   * @default InputLabel
+   */
+  inputLabel?: React.ElementType;
+  /**
+   * The component rendered as the underlying hidden `<input>` element.
+   * @default PickersInputBaseInput
+   */
+  htmlInput?: React.ElementType;
+  /**
+   * The component used for the form helper text slot.
+   * @default FormHelperText
+   */
+  formHelperText?: React.ElementType;
+}
+export interface PickersTextFieldSlotProps<InputPropsType extends PickersInputBaseProps> {
+  root?: Partial<FormControlProps>;
+  input?: Partial<InputPropsType>;
+  inputLabel?: Partial<InputLabelProps>;
+  htmlInput?: React.ComponentPropsWithRef<'input'>;
+  formHelperText?: Partial<FormHelperTextProps>;
+}
+export interface PickersTextFieldSlotsAndSlotProps<InputPropsType extends PickersInputBaseProps> {
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots?: PickersTextFieldSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PickersTextFieldSlotProps<InputPropsType>;
+}
 interface PickersTextFieldPropsUsedByField {
   onFocus: React.FocusEventHandler<HTMLDivElement>;
   onBlur: React.FocusEventHandler<HTMLDivElement>;
   disabled: boolean;
+  /**
+   * If `true`, the `input` will indicate an error.
+   * @default false
+   */
   error: boolean;
 }
-export interface PickersBaseTextFieldProps extends PickersInputPropsUsedByField, PickersTextFieldPropsUsedByField, Omit<FormControlProps, keyof PickersInputPropsUsedByField | keyof PickersTextFieldPropsUsedByField> {
-  FormHelperTextProps?: Partial<FormHelperTextProps>;
-  InputLabelProps?: Partial<InputLabelProps>;
+export interface PickersBaseTextFieldProps extends PickersInputPropsUsedByField, PickersTextFieldPropsUsedByField, Omit<FormControlProps, keyof PickersInputPropsUsedByField | keyof PickersTextFieldPropsUsedByField | 'slots' | 'slotProps'> {
   /**
    * The helper text content.
    */
   helperText?: React.ReactNode;
 }
-export interface PickersStandardTextFieldProps extends PickersBaseTextFieldProps {
+export interface PickersStandardTextFieldProps extends PickersBaseTextFieldProps, PickersTextFieldSlotsAndSlotProps<PickersInputProps> {
   /**
    * The variant to use.
    * @default 'outlined'
    */
   variant?: 'standard';
-  /**
-   * Props applied to the Input element.
-   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
-   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
-   * component depending on the `variant` prop value.
-   */
-  InputProps?: Partial<PickersInputProps>;
 }
-export interface PickersOutlinedTextFieldProps extends PickersBaseTextFieldProps {
+export interface PickersOutlinedTextFieldProps extends PickersBaseTextFieldProps, PickersTextFieldSlotsAndSlotProps<PickersOutlinedInputProps> {
   /**
    * The variant to use.
    * @default 'outlined'
    */
   variant?: 'outlined';
-  /**
-   * Props applied to the Input element.
-   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
-   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
-   * component depending on the `variant` prop value.
-   */
-  InputProps?: Partial<PickersOutlinedInputProps>;
 }
-export interface PickersFilledTextFieldProps extends PickersBaseTextFieldProps {
+export interface PickersFilledTextFieldProps extends PickersBaseTextFieldProps, PickersTextFieldSlotsAndSlotProps<PickersFilledInputProps> {
   /**
    * The variant to use.
    * @default 'outlined'
    */
   variant?: 'filled';
-  /**
-   * Props applied to the Input element.
-   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
-   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
-   * component depending on the `variant` prop value.
-   */
-  InputProps?: Partial<PickersFilledInputProps>;
 }
 export type PickersTextFieldProps<Variant extends TextFieldVariants = TextFieldVariants> = Variant extends 'filled' ? PickersFilledTextFieldProps : Variant extends 'standard' ? PickersStandardTextFieldProps : PickersOutlinedTextFieldProps;
 export {};