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

package/PickersTextField/PickersFilledInput/PickersFilledInput.js

@@ -20,7 +20,7 @@ var _PickersInputBase = require("../PickersInputBase");
 var _PickersInputBase2 = require("../PickersInputBase/PickersInputBase");
 var _usePickerTextFieldOwnerState = require("../usePickerTextFieldOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["label", "autoFocus", "disableUnderline", "hiddenLabel", "classes"];
+const _excluded = ["label", "autoFocus", "disableUnderline", "hiddenLabel", "classes", "slots", "slotProps"];
 const PickersFilledInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersInputBaseRoot, {
   name: 'MuiPickersFilledInput',
   slot: 'Root',
@@ -97,7 +97,7 @@ const PickersFilledInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersInp
           }
         },
         '&::before': {
-          borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
+          borderBottom: `1px solid ${theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline) : bottomLineColor}`,
           left: 0,
           bottom: 0,
           // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -207,7 +207,9 @@ const PickersFilledInput = exports.PickersFilledInput = /*#__PURE__*/React.forwa
       label,
       disableUnderline = false,
       hiddenLabel = false,
-      classes: classesProp
+      classes: classesProp,
+      slots: inSlots,
+      slotProps: inSlotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const pickerTextFieldOwnerState = (0, _usePickerTextFieldOwnerState.usePickerTextFieldOwnerState)();
@@ -215,20 +217,19 @@ const PickersFilledInput = exports.PickersFilledInput = /*#__PURE__*/React.forwa
     inputHasUnderline: !disableUnderline
   });
   const classes = useUtilityClasses(classesProp, ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersInputBase.PickersInputBase, (0, _extends2.default)({
-    slots: {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersInputBase.PickersInputBase, (0, _extends2.default)({}, other, {
+    slots: (0, _extends2.default)({
       root: PickersFilledInputRoot,
       input: PickersFilledSectionsContainer
-    },
-    slotProps: {
-      root: {
+    }, inSlots),
+    slotProps: (0, _extends2.default)({}, inSlotProps, {
+      root: (0, _extends2.default)({
         disableUnderline
-      },
-      input: {
+      }, inSlotProps?.root),
+      input: (0, _extends2.default)({
         hiddenLabel
-      }
-    }
-  }, other, {
+      }, inSlotProps?.input)
+    }),
     label: label,
     classes: classes,
     ref: ref,
@@ -247,8 +248,8 @@ process.env.NODE_ENV !== "production" ? PickersFilledInput.propTypes = {
    * For a range value, it means that `value === [null, null]`
    */
   areAllSectionsEmpty: _propTypes.default.bool.isRequired,
+  classes: _propTypes.default.object,
   className: _propTypes.default.string,
-  component: _propTypes.default.elementType,
   /**
    * If true, the whole element is editable.
    * Useful when all the sections are selected.
@@ -266,14 +267,32 @@ process.env.NODE_ENV !== "production" ? PickersFilledInput.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 take up the full width of its container.
+   * @default false
+   */
   fullWidth: _propTypes.default.bool,
   hiddenLabel: _propTypes.default.bool,
+  /**
+   * The id of the `input` element.
+   */
   id: _propTypes.default.string,
-  inputProps: _propTypes.default.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
   inputRef: _refType.default,
+  /**
+   * The label content.
+   */
   label: _propTypes.default.node,
   margin: _propTypes.default.oneOf(['dense', 'none', 'normal']),
+  /**
+   * Name attribute of the `input` element.
+   */
   name: _propTypes.default.string,
   onChange: _propTypes.default.func.isRequired,
   onClick: _propTypes.default.func.isRequired,
@@ -302,8 +321,10 @@ process.env.NODE_ENV !== "production" ? PickersFilledInput.propTypes = {
    * @default {}
    */
   slots: _propTypes.default.object,
+  /**
+   * Start `InputAdornment` for this component.
+   */
   startAdornment: _propTypes.default.node,
-  style: _propTypes.default.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/PickersTextField/PickersFilledInput/PickersFilledInput.mjs

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["label", "autoFocus", "disableUnderline", "hiddenLabel", "classes"];
+const _excluded = ["label", "autoFocus", "disableUnderline", "hiddenLabel", "classes", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled, useThemeProps } from '@mui/material/styles';
@@ -90,7 +90,7 @@ const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
           }
         },
         '&::before': {
-          borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
+          borderBottom: `1px solid ${theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline) : bottomLineColor}`,
           left: 0,
           bottom: 0,
           // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -200,7 +200,9 @@ const PickersFilledInput = /*#__PURE__*/React.forwardRef(function PickersFilledI
       label,
       disableUnderline = false,
       hiddenLabel = false,
-      classes: classesProp
+      classes: classesProp,
+      slots: inSlots,
+      slotProps: inSlotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const pickerTextFieldOwnerState = usePickerTextFieldOwnerState();
@@ -208,20 +210,19 @@ const PickersFilledInput = /*#__PURE__*/React.forwardRef(function PickersFilledI
     inputHasUnderline: !disableUnderline
   });
   const classes = useUtilityClasses(classesProp, ownerState);
-  return /*#__PURE__*/_jsx(PickersInputBase, _extends({
-    slots: {
+  return /*#__PURE__*/_jsx(PickersInputBase, _extends({}, other, {
+    slots: _extends({
       root: PickersFilledInputRoot,
       input: PickersFilledSectionsContainer
-    },
-    slotProps: {
-      root: {
+    }, inSlots),
+    slotProps: _extends({}, inSlotProps, {
+      root: _extends({
         disableUnderline
-      },
-      input: {
+      }, inSlotProps?.root),
+      input: _extends({
         hiddenLabel
-      }
-    }
-  }, other, {
+      }, inSlotProps?.input)
+    }),
     label: label,
     classes: classes,
     ref: ref,
@@ -240,8 +241,8 @@ process.env.NODE_ENV !== "production" ? PickersFilledInput.propTypes = {
    * For a range value, it means that `value === [null, null]`
    */
   areAllSectionsEmpty: PropTypes.bool.isRequired,
+  classes: PropTypes.object,
   className: PropTypes.string,
-  component: PropTypes.elementType,
   /**
    * If true, the whole element is editable.
    * Useful when all the sections are selected.
@@ -259,14 +260,32 @@ process.env.NODE_ENV !== "production" ? PickersFilledInput.propTypes = {
     container: PropTypes.object.isRequired,
     content: PropTypes.object.isRequired
   })).isRequired,
+  /**
+   * End `InputAdornment` for this component.
+   */
   endAdornment: PropTypes.node,
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
   fullWidth: PropTypes.bool,
   hiddenLabel: PropTypes.bool,
+  /**
+   * The id of the `input` element.
+   */
   id: PropTypes.string,
-  inputProps: PropTypes.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
   inputRef: refType,
+  /**
+   * The label content.
+   */
   label: PropTypes.node,
   margin: PropTypes.oneOf(['dense', 'none', 'normal']),
+  /**
+   * Name attribute of the `input` element.
+   */
   name: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   onClick: PropTypes.func.isRequired,
@@ -295,8 +314,10 @@ process.env.NODE_ENV !== "production" ? PickersFilledInput.propTypes = {
    * @default {}
    */
   slots: PropTypes.object,
+  /**
+   * Start `InputAdornment` for this component.
+   */
   startAdornment: PropTypes.node,
-  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/PickersTextField/PickersInput/PickersInput.js

@@ -20,7 +20,7 @@ var _PickersInputBase = require("../PickersInputBase");
 var _PickersInputBase2 = require("../PickersInputBase/PickersInputBase");
 var _usePickerTextFieldOwnerState = require("../usePickerTextFieldOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["label", "autoFocus", "disableUnderline", "ownerState", "classes"];
+const _excluded = ["label", "autoFocus", "disableUnderline", "ownerState", "classes", "slots", "slotProps"];
 const PickersInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersInputBaseRoot, {
   name: 'MuiPickersInput',
   slot: 'Root',
@@ -31,7 +31,7 @@ const PickersInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersInputBase
   const light = theme.palette.mode === 'light';
   let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   if (theme.vars) {
-    bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`;
+    bottomLineColor = theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline);
   }
   return {
     'label + &': {
@@ -130,7 +130,9 @@ const PickersInput = exports.PickersInput = /*#__PURE__*/React.forwardRef(functi
   const {
       label,
       disableUnderline = false,
-      classes: classesProp
+      classes: classesProp,
+      slots: inSlots,
+      slotProps: inSlotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const pickerTextFieldOwnerState = (0, _usePickerTextFieldOwnerState.usePickerTextFieldOwnerState)();
@@ -138,16 +140,15 @@ const PickersInput = exports.PickersInput = /*#__PURE__*/React.forwardRef(functi
     inputHasUnderline: !disableUnderline
   });
   const classes = useUtilityClasses(classesProp, ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersInputBase.PickersInputBase, (0, _extends2.default)({
-    slots: {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersInputBase.PickersInputBase, (0, _extends2.default)({}, other, {
+    slots: (0, _extends2.default)({
       root: PickersInputRoot
-    },
-    slotProps: {
-      root: {
+    }, inSlots),
+    slotProps: (0, _extends2.default)({}, inSlotProps, {
+      root: (0, _extends2.default)({
         disableUnderline
-      }
-    }
-  }, other, {
+      }, inSlotProps?.root)
+    }),
     ownerState: ownerState,
     label: label,
     classes: classes,
@@ -166,8 +167,8 @@ process.env.NODE_ENV !== "production" ? PickersInput.propTypes = {
    * For a range value, it means that `value === [null, null]`
    */
   areAllSectionsEmpty: _propTypes.default.bool.isRequired,
+  classes: _propTypes.default.object,
   className: _propTypes.default.string,
-  component: _propTypes.default.elementType,
   /**
    * If true, the whole element is editable.
    * Useful when all the sections are selected.
@@ -185,13 +186,31 @@ process.env.NODE_ENV !== "production" ? PickersInput.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 take up the full width of its container.
+   * @default false
+   */
   fullWidth: _propTypes.default.bool,
+  /**
+   * The id of the `input` element.
+   */
   id: _propTypes.default.string,
-  inputProps: _propTypes.default.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
   inputRef: _refType.default,
+  /**
+   * The label content.
+   */
   label: _propTypes.default.node,
   margin: _propTypes.default.oneOf(['dense', 'none', 'normal']),
+  /**
+   * Name attribute of the `input` element.
+   */
   name: _propTypes.default.string,
   onChange: _propTypes.default.func.isRequired,
   onClick: _propTypes.default.func.isRequired,
@@ -220,8 +239,10 @@ process.env.NODE_ENV !== "production" ? PickersInput.propTypes = {
    * @default {}
    */
   slots: _propTypes.default.object,
+  /**
+   * Start `InputAdornment` for this component.
+   */
   startAdornment: _propTypes.default.node,
-  style: _propTypes.default.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/PickersTextField/PickersInput/PickersInput.mjs

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["label", "autoFocus", "disableUnderline", "ownerState", "classes"];
+const _excluded = ["label", "autoFocus", "disableUnderline", "ownerState", "classes", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled, useThemeProps } from '@mui/material/styles';
@@ -24,7 +24,7 @@ const PickersInputRoot = styled(PickersInputBaseRoot, {
   const light = theme.palette.mode === 'light';
   let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   if (theme.vars) {
-    bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`;
+    bottomLineColor = theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline);
   }
   return {
     'label + &': {
@@ -123,7 +123,9 @@ const PickersInput = /*#__PURE__*/React.forwardRef(function PickersInput(inProps
   const {
       label,
       disableUnderline = false,
-      classes: classesProp
+      classes: classesProp,
+      slots: inSlots,
+      slotProps: inSlotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const pickerTextFieldOwnerState = usePickerTextFieldOwnerState();
@@ -131,16 +133,15 @@ const PickersInput = /*#__PURE__*/React.forwardRef(function PickersInput(inProps
     inputHasUnderline: !disableUnderline
   });
   const classes = useUtilityClasses(classesProp, ownerState);
-  return /*#__PURE__*/_jsx(PickersInputBase, _extends({
-    slots: {
+  return /*#__PURE__*/_jsx(PickersInputBase, _extends({}, other, {
+    slots: _extends({
       root: PickersInputRoot
-    },
-    slotProps: {
-      root: {
+    }, inSlots),
+    slotProps: _extends({}, inSlotProps, {
+      root: _extends({
         disableUnderline
-      }
-    }
-  }, other, {
+      }, inSlotProps?.root)
+    }),
     ownerState: ownerState,
     label: label,
     classes: classes,
@@ -159,8 +160,8 @@ process.env.NODE_ENV !== "production" ? PickersInput.propTypes = {
    * For a range value, it means that `value === [null, null]`
    */
   areAllSectionsEmpty: PropTypes.bool.isRequired,
+  classes: PropTypes.object,
   className: PropTypes.string,
-  component: PropTypes.elementType,
   /**
    * If true, the whole element is editable.
    * Useful when all the sections are selected.
@@ -178,13 +179,31 @@ process.env.NODE_ENV !== "production" ? PickersInput.propTypes = {
     container: PropTypes.object.isRequired,
     content: PropTypes.object.isRequired
   })).isRequired,
+  /**
+   * End `InputAdornment` for this component.
+   */
   endAdornment: PropTypes.node,
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
   fullWidth: PropTypes.bool,
+  /**
+   * The id of the `input` element.
+   */
   id: PropTypes.string,
-  inputProps: PropTypes.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
   inputRef: refType,
+  /**
+   * The label content.
+   */
   label: PropTypes.node,
   margin: PropTypes.oneOf(['dense', 'none', 'normal']),
+  /**
+   * Name attribute of the `input` element.
+   */
   name: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   onClick: PropTypes.func.isRequired,
@@ -213,8 +232,10 @@ process.env.NODE_ENV !== "production" ? PickersInput.propTypes = {
    * @default {}
    */
   slots: PropTypes.object,
+  /**
+   * Start `InputAdornment` for this component.
+   */
   startAdornment: PropTypes.node,
-  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -24,7 +24,8 @@ var _pickersInputBaseClasses = require("./pickersInputBaseClasses");
 var _PickersSectionList = require("../../PickersSectionList");
 var _usePickerTextFieldOwnerState = require("../usePickerTextFieldOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef", "onFocus", "onBlur", "classes", "ownerState"];
+const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputRef", "sectionListRef", "onFocus", "onBlur", "classes", "ownerState"],
+  _excluded2 = ["ref"];
 const round = value => Math.round(value * 1e5) / 1e5;
 const PickersInputBaseRoot = exports.PickersInputBaseRoot = (0, _styles.styled)('div', {
   name: 'MuiPickersInputBase',
@@ -267,7 +268,6 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
       onKeyDown,
       name,
       readOnly,
-      inputProps,
       inputRef,
       sectionListRef,
       onFocus,
@@ -281,7 +281,6 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
   const activeBarRef = React.useRef(null);
   const sectionOffsetsRef = React.useRef([]);
   const handleRootRef = (0, _useForkRef.default)(ref, rootRef);
-  const handleInputRef = (0, _useForkRef.default)(inputProps?.ref, inputRef);
   const muiFormControl = (0, _FormControl.useFormControl)();
   if (!muiFormControl) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X: PickersInputBase should always be used inside a PickersTextField component' : (0, _formatErrorMessage2.default)(152));
@@ -345,6 +344,17 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
     ownerState
   });
   const InputSectionsContainer = slots?.input || PickersInputBaseSectionsContainer;
+  const HtmlInputComponent = slots?.htmlInput || PickersInputBaseInput;
+  const _ref = (0, _useSlotProps.default)({
+      elementType: HtmlInputComponent,
+      externalSlotProps: slotProps?.htmlInput,
+      ownerState
+    }),
+    {
+      ref: resolvedHtmlInputRef
+    } = _ref,
+    htmlInputProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
+  const handleInputRef = (0, _useForkRef.default)(resolvedHtmlInputRef, inputRef);
   const isSingleInputRange = elements.some(element => element.content['data-range-position'] !== undefined);
   React.useEffect(() => {
     if (!isSingleInputRange || !ownerState.isPickerOpen) {
@@ -390,7 +400,7 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
           className: separatorPosition === 'before' ? _pickersInputBaseClasses.pickersInputBaseClasses.sectionBefore : _pickersInputBaseClasses.pickersInputBaseClasses.sectionAfter
         })
       }
-    }), endAdornment, renderSuffix ? renderSuffix((0, _extends2.default)({}, muiFormControl)) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersInputBaseInput, (0, _extends2.default)({
+    }), endAdornment, renderSuffix ? renderSuffix((0, _extends2.default)({}, muiFormControl)) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(HtmlInputComponent, (0, _extends2.default)({
       name: name,
       className: classes.input,
       value: value,
@@ -405,7 +415,7 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
       // This allows to maintain the ability to do `inputRef.current.focus()` to focus the field
       ,
       onFocus: handleHiddenInputFocus
-    }, inputProps, {
+    }, htmlInputProps, {
       ref: handleInputRef
     })), isSingleInputRange && /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersInputBaseActiveBar, {
       className: classes.activeBar,
@@ -428,8 +438,8 @@ process.env.NODE_ENV !== "production" ? PickersInputBase.propTypes = {
    * For a range value, it means that `value === [null, null]`
    */
   areAllSectionsEmpty: _propTypes.default.bool.isRequired,
+  classes: _propTypes.default.object,
   className: _propTypes.default.string,
-  component: _propTypes.default.elementType,
   /**
    * If true, the whole element is editable.
    * Useful when all the sections are selected.
@@ -446,13 +456,31 @@ process.env.NODE_ENV !== "production" ? PickersInputBase.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 take up the full width of its container.
+   * @default false
+   */
   fullWidth: _propTypes.default.bool,
+  /**
+   * The id of the `input` element.
+   */
   id: _propTypes.default.string,
-  inputProps: _propTypes.default.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
   inputRef: _refType.default,
+  /**
+   * The label content.
+   */
   label: _propTypes.default.node,
   margin: _propTypes.default.oneOf(['dense', 'none', 'normal']),
+  /**
+   * Name attribute of the `input` element.
+   */
   name: _propTypes.default.string,
   onChange: _propTypes.default.func.isRequired,
   onClick: _propTypes.default.func.isRequired,
@@ -481,8 +509,10 @@ process.env.NODE_ENV !== "production" ? PickersInputBase.propTypes = {
    * @default {}
    */
   slots: _propTypes.default.object,
+  /**
+   * Start `InputAdornment` for this component.
+   */
   startAdornment: _propTypes.default.node,
-  style: _propTypes.default.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/PickersTextField/PickersInputBase/PickersInputBase.mjs

@@ -3,7 +3,8 @@
 import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef", "onFocus", "onBlur", "classes", "ownerState"];
+const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputRef", "sectionListRef", "onFocus", "onBlur", "classes", "ownerState"],
+  _excluded2 = ["ref"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useFormControl } from '@mui/material/FormControl';
@@ -260,7 +261,6 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       onKeyDown,
       name,
       readOnly,
-      inputProps,
       inputRef,
       sectionListRef,
       onFocus,
@@ -274,7 +274,6 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
   const activeBarRef = React.useRef(null);
   const sectionOffsetsRef = React.useRef([]);
   const handleRootRef = useForkRef(ref, rootRef);
-  const handleInputRef = useForkRef(inputProps?.ref, inputRef);
   const muiFormControl = useFormControl();
   if (!muiFormControl) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X: PickersInputBase should always be used inside a PickersTextField component' : _formatErrorMessage(152));
@@ -338,6 +337,17 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
     ownerState
   });
   const InputSectionsContainer = slots?.input || PickersInputBaseSectionsContainer;
+  const HtmlInputComponent = slots?.htmlInput || PickersInputBaseInput;
+  const _ref = useSlotProps({
+      elementType: HtmlInputComponent,
+      externalSlotProps: slotProps?.htmlInput,
+      ownerState
+    }),
+    {
+      ref: resolvedHtmlInputRef
+    } = _ref,
+    htmlInputProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
+  const handleInputRef = useForkRef(resolvedHtmlInputRef, inputRef);
   const isSingleInputRange = elements.some(element => element.content['data-range-position'] !== undefined);
   React.useEffect(() => {
     if (!isSingleInputRange || !ownerState.isPickerOpen) {
@@ -383,7 +393,7 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
           className: separatorPosition === 'before' ? pickersInputBaseClasses.sectionBefore : pickersInputBaseClasses.sectionAfter
         })
       }
-    }), endAdornment, renderSuffix ? renderSuffix(_extends({}, muiFormControl)) : null, /*#__PURE__*/_jsx(PickersInputBaseInput, _extends({
+    }), endAdornment, renderSuffix ? renderSuffix(_extends({}, muiFormControl)) : null, /*#__PURE__*/_jsx(HtmlInputComponent, _extends({
       name: name,
       className: classes.input,
       value: value,
@@ -398,7 +408,7 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       // This allows to maintain the ability to do `inputRef.current.focus()` to focus the field
       ,
       onFocus: handleHiddenInputFocus
-    }, inputProps, {
+    }, htmlInputProps, {
       ref: handleInputRef
     })), isSingleInputRange && /*#__PURE__*/_jsx(PickersInputBaseActiveBar, {
       className: classes.activeBar,
@@ -421,8 +431,8 @@ process.env.NODE_ENV !== "production" ? PickersInputBase.propTypes = {
    * For a range value, it means that `value === [null, null]`
    */
   areAllSectionsEmpty: PropTypes.bool.isRequired,
+  classes: PropTypes.object,
   className: PropTypes.string,
-  component: PropTypes.elementType,
   /**
    * If true, the whole element is editable.
    * Useful when all the sections are selected.
@@ -439,13 +449,31 @@ process.env.NODE_ENV !== "production" ? PickersInputBase.propTypes = {
     container: PropTypes.object.isRequired,
     content: PropTypes.object.isRequired
   })).isRequired,
+  /**
+   * End `InputAdornment` for this component.
+   */
   endAdornment: PropTypes.node,
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
   fullWidth: PropTypes.bool,
+  /**
+   * The id of the `input` element.
+   */
   id: PropTypes.string,
-  inputProps: PropTypes.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
   inputRef: refType,
+  /**
+   * The label content.
+   */
   label: PropTypes.node,
   margin: PropTypes.oneOf(['dense', 'none', 'normal']),
+  /**
+   * Name attribute of the `input` element.
+   */
   name: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   onClick: PropTypes.func.isRequired,
@@ -474,8 +502,10 @@ process.env.NODE_ENV !== "production" ? PickersInputBase.propTypes = {
    * @default {}
    */
   slots: PropTypes.object,
+  /**
+   * Start `InputAdornment` for this component.
+   */
   startAdornment: PropTypes.node,
-  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */