@mui/x-date-pickers 8.0.0-alpha.4 → 8.0.0-alpha.5

package/node/MonthCalendar/MonthCalendar.js

@@ -14,9 +14,10 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _createStyled = require("@mui/system/createStyled");
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
-var _PickersMonth = require("./PickersMonth");
+var _MonthCalendarButton = require("./MonthCalendarButton");
 var _useUtils = require("../internals/hooks/useUtils");
 var _monthCalendarClasses = require("./monthCalendarClasses");
 var _dateUtils = require("../internals/utils/date-utils");
@@ -26,7 +27,7 @@ var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _dimensions = require("../internals/constants/dimensions");
 var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
+const _excluded = ["autoFocus", "className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
@@ -44,6 +45,7 @@ function useMonthCalendarDefaultizedProps(props, name) {
     disableFuture: false,
     disablePast: false
   }, themeProps, {
+    monthsPerRow: themeProps.monthsPerRow ?? 3,
     minDate: (0, _dateUtils.applyDefaultDate)(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: (0, _dateUtils.applyDefaultDate)(utils, themeProps.maxDate, defaultDates.maxDate)
   });
@@ -51,15 +53,32 @@ function useMonthCalendarDefaultizedProps(props, name) {
 const MonthCalendarRoot = (0, _styles.styled)('div', {
   name: 'MuiMonthCalendar',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (props, styles) => styles.root,
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'monthsPerRow'
 })({
   display: 'flex',
   flexWrap: 'wrap',
-  alignContent: 'stretch',
-  padding: '0 4px',
+  justifyContent: 'space-evenly',
+  rowGap: 16,
+  padding: '8px 0',
   width: _dimensions.DIALOG_WIDTH,
   // avoid padding increasing width over defined
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  variants: [{
+    props: {
+      monthsPerRow: 3
+    },
+    style: {
+      columnGap: 24
+    }
+  }, {
+    props: {
+      monthsPerRow: 4
+    },
+    style: {
+      columnGap: 0
+    }
+  }]
 });
 /**
  * Demos:
@@ -73,6 +92,7 @@ const MonthCalendarRoot = (0, _styles.styled)('div', {
 const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inProps, ref) {
   const props = useMonthCalendarDefaultizedProps(inProps, 'MuiMonthCalendar');
   const {
+      autoFocus,
       className,
       classes: classesProp,
       value: valueProp,
@@ -86,11 +106,10 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
       onChange,
       shouldDisableMonth,
       readOnly,
-      autoFocus = false,
       onMonthFocus,
       hasFocus,
       onFocusedViewChange,
-      monthsPerRow = 3,
+      monthsPerRow,
       timezone: timezoneProp,
       gridLabelId,
       slots,
@@ -217,7 +236,8 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
     role: "radiogroup",
-    "aria-labelledby": gridLabelId
+    "aria-labelledby": gridLabelId,
+    monthsPerRow: monthsPerRow
   }, other, {
     children: (0, _dateUtils.getMonthsInYear)(utils, value ?? referenceDate).map(month => {
       const monthNumber = utils.getMonth(month);
@@ -225,7 +245,7 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
       const monthLabel = utils.format(month, 'month');
       const isSelected = monthNumber === selectedMonth;
       const isDisabled = disabled || isMonthDisabled(month);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersMonth.PickersMonth, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MonthCalendarButton.MonthCalendarButton, {
         selected: isSelected,
         value: monthNumber,
         onClick: handleMonthSelection,
@@ -237,9 +257,9 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
         onBlur: handleMonthBlur,
         "aria-current": todayMonth === monthNumber ? 'date' : undefined,
         "aria-label": monthLabel,
-        monthsPerRow: monthsPerRow,
         slots: slots,
         slotProps: slotProps,
+        classes: classesProp,
         children: monthText
       }, monthText);
     })

package/node/MonthCalendar/{PickersMonth.js → MonthCalendarButton.js}

@@ -5,51 +5,31 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PickersMonth = void 0;
+exports.MonthCalendarButton = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _pickersMonthClasses = require("./pickersMonthClasses");
 var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
+var _monthCalendarClasses = require("./monthCalendarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["autoFocus", "className", "classes", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "aria-label", "monthsPerRow", "slots", "slotProps"];
+const _excluded = ["autoFocus", "classes", "disabled", "selected", "value", "onClick", "onKeyDown", "onFocus", "onBlur", "slots", "slotProps"];
 const useUtilityClasses = (classes, ownerState) => {
   const slots = {
-    root: ['root'],
-    monthButton: ['monthButton', ownerState.isMonthDisabled && 'disabled', ownerState.isMonthSelected && 'selected']
+    button: ['button', ownerState.isMonthDisabled && 'disabled', ownerState.isMonthSelected && 'selected']
   };
-  return (0, _composeClasses.default)(slots, _pickersMonthClasses.getPickersMonthUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _monthCalendarClasses.getMonthCalendarUtilityClass, classes);
 };
-const PickersMonthRoot = (0, _styles.styled)('div', {
-  name: 'MuiPickersMonth',
-  slot: 'Root',
-  overridesResolver: (_, styles) => [styles.root]
-})({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexBasis: '33.3%',
-  variants: [{
-    props: {
-      monthsPerRow: 4
-    },
-    style: {
-      flexBasis: '25%'
-    }
-  }]
-});
-const MonthCalendarButton = (0, _styles.styled)('button', {
-  name: 'MuiPickersMonth',
-  slot: 'MonthButton',
-  overridesResolver: (_, styles) => [styles.monthButton, {
-    [`&.${_pickersMonthClasses.pickersMonthClasses.disabled}`]: styles.disabled
+const DefaultMonthButton = (0, _styles.styled)('button', {
+  name: 'MuiMonthCalendar',
+  slot: 'Button',
+  overridesResolver: (_, styles) => [styles.button, {
+    [`&.${_monthCalendarClasses.monthCalendarClasses.disabled}`]: styles.disabled
   }, {
-    [`&.${_pickersMonthClasses.pickersMonthClasses.selected}`]: styles.selected
+    [`&.${_monthCalendarClasses.monthCalendarClasses.selected}`]: styles.selected
   }]
 })(({
   theme
@@ -59,7 +39,6 @@ const MonthCalendarButton = (0, _styles.styled)('button', {
   border: 0,
   outline: 0
 }, theme.typography.subtitle1, {
-  margin: '8px 0',
   height: 36,
   width: 72,
   borderRadius: 18,
@@ -74,10 +53,10 @@ const MonthCalendarButton = (0, _styles.styled)('button', {
     cursor: 'auto',
     pointerEvents: 'none'
   },
-  [`&.${_pickersMonthClasses.pickersMonthClasses.disabled}`]: {
+  [`&.${_monthCalendarClasses.monthCalendarClasses.disabled}`]: {
     color: (theme.vars || theme).palette.text.secondary
   },
-  [`&.${_pickersMonthClasses.pickersMonthClasses.selected}`]: {
+  [`&.${_monthCalendarClasses.monthCalendarClasses.selected}`]: {
     color: (theme.vars || theme).palette.primary.contrastText,
     backgroundColor: (theme.vars || theme).palette.primary.main,
     '&:focus, &:hover': {
@@ -89,29 +68,17 @@ const MonthCalendarButton = (0, _styles.styled)('button', {
 /**
  * @ignore - do not document.
  */
-const PickersMonth = exports.PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProps) {
-  const props = (0, _styles.useThemeProps)({
-    props: inProps,
-    name: 'MuiPickersMonth'
-  });
+const MonthCalendarButton = exports.MonthCalendarButton = /*#__PURE__*/React.memo(function MonthCalendarButton(props) {
   const {
       autoFocus,
-      className,
       classes: classesProp,
-      children,
-      disabled = false,
-      selected = false,
+      disabled,
+      selected,
       value,
-      tabIndex,
       onClick,
       onKeyDown,
       onFocus,
       onBlur,
-      'aria-current': ariaCurrent,
-      'aria-label': ariaLabel
-      // We don't want to forward this prop to the root element
-      ,
-
       slots,
       slotProps
     } = props,
@@ -133,32 +100,24 @@ const PickersMonth = exports.PickersMonth = /*#__PURE__*/React.memo(function Pic
       ref.current?.focus();
     }
   }, [autoFocus]);
-  const MonthButton = slots?.monthButton ?? MonthCalendarButton;
+  const MonthButton = slots?.monthButton ?? DefaultMonthButton;
   const monthButtonProps = (0, _useSlotProps.default)({
     elementType: MonthButton,
     externalSlotProps: slotProps?.monthButton,
+    externalForwardedProps: other,
     additionalProps: {
-      children,
       disabled,
-      tabIndex,
       ref,
       type: 'button',
       role: 'radio',
-      'aria-current': ariaCurrent,
       'aria-checked': selected,
-      'aria-label': ariaLabel,
       onClick: event => onClick(event, value),
       onKeyDown: event => onKeyDown(event, value),
       onFocus: event => onFocus(event, value),
       onBlur: event => onBlur(event, value)
     },
     ownerState,
-    className: classes.monthButton
+    className: classes.button
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersMonthRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(classes.root, className),
-    ownerState: ownerState
-  }, other, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthButton, (0, _extends2.default)({}, monthButtonProps))
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthButton, (0, _extends2.default)({}, monthButtonProps));
 });

package/node/MonthCalendar/index.js

@@ -21,12 +21,5 @@ Object.defineProperty(exports, "monthCalendarClasses", {
     return _monthCalendarClasses.monthCalendarClasses;
   }
 });
-Object.defineProperty(exports, "pickersMonthClasses", {
-  enumerable: true,
-  get: function () {
-    return _pickersMonthClasses.pickersMonthClasses;
-  }
-});
 var _MonthCalendar = require("./MonthCalendar");
-var _monthCalendarClasses = require("./monthCalendarClasses");
-var _pickersMonthClasses = require("./pickersMonthClasses");
+var _monthCalendarClasses = require("./monthCalendarClasses");

package/node/MonthCalendar/monthCalendarClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getMonthCalendarUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiMonthCalendar', slot);
 }
-const monthCalendarClasses = exports.monthCalendarClasses = (0, _utils.unstable_generateUtilityClasses)('MuiMonthCalendar', ['root']);
+const monthCalendarClasses = exports.monthCalendarClasses = (0, _utils.unstable_generateUtilityClasses)('MuiMonthCalendar', ['root', 'button', 'disabled', 'selected']);

package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -196,6 +196,9 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
         {
           const valueWithMeridiem = (0, _timeUtils.convertValueToMeridiem)(rawValue, meridiemMode, ampm);
           const dateWithNewHours = utils.setHours(valueOrReferenceDate, valueWithMeridiem);
+          if (utils.getHours(dateWithNewHours) !== valueWithMeridiem) {
+            return true;
+          }
           const start = utils.setSeconds(utils.setMinutes(dateWithNewHours, 0), 0);
           const end = utils.setSeconds(utils.setMinutes(dateWithNewHours, 59), 59);
           return !containsValidTime({

package/node/PickersSectionList/PickersSectionList.js

@@ -16,8 +16,9 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _styles = require("@mui/material/styles");
 var _pickersSectionListClasses = require("./pickersSectionListClasses");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "elements", "sectionListRef"];
+const _excluded = ["slots", "slotProps", "elements", "sectionListRef", "classes"];
 const PickersSectionListRoot = exports.PickersSectionListRoot = (0, _styles.styled)('div', {
   name: 'MuiPickersSectionList',
   slot: 'Root',
@@ -45,10 +46,7 @@ const PickersSectionListSectionContent = exports.PickersSectionListSectionConten
 })({
   outline: 'none'
 });
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     section: ['section'],
@@ -63,13 +61,16 @@ function PickersSection(props) {
     element,
     classes
   } = props;
+  const {
+    ownerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const Section = slots?.section ?? PickersSectionListSection;
   const sectionProps = (0, _useSlotProps.default)({
     elementType: Section,
     externalSlotProps: slotProps?.section,
     externalForwardedProps: element.container,
     className: classes.section,
-    ownerState: {}
+    ownerState
   });
   const SectionContent = slots?.sectionContent ?? PickersSectionListSectionContent;
   const sectionContentProps = (0, _useSlotProps.default)({
@@ -80,24 +81,24 @@ function PickersSection(props) {
       suppressContentEditableWarning: true
     },
     className: classes.sectionContent,
-    ownerState: {}
+    ownerState
   });
   const SectionSeparator = slots?.sectionSeparator ?? PickersSectionListSectionSeparator;
   const sectionSeparatorBeforeProps = (0, _useSlotProps.default)({
     elementType: SectionSeparator,
     externalSlotProps: slotProps?.sectionSeparator,
     externalForwardedProps: element.before,
-    ownerState: {
-      position: 'before'
-    }
+    ownerState: (0, _extends2.default)({}, ownerState, {
+      separatorPosition: 'before'
+    })
   });
   const sectionSeparatorAfterProps = (0, _useSlotProps.default)({
     elementType: SectionSeparator,
     externalSlotProps: slotProps?.sectionSeparator,
     externalForwardedProps: element.after,
-    ownerState: {
-      position: 'after'
-    }
+    ownerState: (0, _extends2.default)({}, ownerState, {
+      separatorPosition: 'after'
+    })
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Section, (0, _extends2.default)({}, sectionProps, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionSeparator, (0, _extends2.default)({}, sectionSeparatorBeforeProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(SectionContent, (0, _extends2.default)({}, sectionContentProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(SectionSeparator, (0, _extends2.default)({}, sectionSeparatorAfterProps))]
@@ -142,10 +143,14 @@ const PickersSectionList = exports.PickersSectionList = /*#__PURE__*/React.forwa
       slots,
       slotProps,
       elements,
-      sectionListRef
+      sectionListRef,
+      classes: classesProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
+  const {
+    ownerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const rootRef = React.useRef(null);
   const handleRootRef = (0, _useForkRef.default)(ref, rootRef);
   const getRoot = methodName => {
@@ -193,7 +198,7 @@ const PickersSectionList = exports.PickersSectionList = /*#__PURE__*/React.forwa
       suppressContentEditableWarning: true
     },
     className: classes.root,
-    ownerState: {}
+    ownerState
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
     children: rootProps.contentEditable ? elements.map(({

package/node/PickersTextField/PickersFilledInput/PickersFilledInput.js

@@ -10,7 +10,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _FormControl = require("@mui/material/FormControl");
 var _styles = require("@mui/material/styles");
 var _system = require("@mui/system");
 var _utils = require("@mui/utils");
@@ -18,8 +17,9 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _pickersFilledInputClasses = require("./pickersFilledInputClasses");
 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"];
+const _excluded = ["label", "autoFocus", "disableUnderline", "hiddenLabel", "classes"];
 const PickersFilledInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersInputBaseRoot, {
   name: 'MuiPickersFilledInput',
   slot: 'Root',
@@ -58,7 +58,7 @@ const PickersFilledInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersInp
     // @ts-ignore
     .filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
       props: {
-        color,
+        inputColor: color,
         disableUnderline: false
       },
       style: {
@@ -117,16 +117,16 @@ const PickersFilledInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersInp
         }
       }
     }, {
-      props: ({
-        startAdornment
-      }) => !!startAdornment,
+      props: {
+        hasStartAdornment: true
+      },
       style: {
         paddingLeft: 12
       }
     }, {
-      props: ({
-        endAdornment
-      }) => !!endAdornment,
+      props: {
+        hasEndAdornment: true
+      },
       style: {
         paddingRight: 12
       }
@@ -136,7 +136,8 @@ const PickersFilledInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersInp
 const PickersFilledSectionsContainer = (0, _styles.styled)(_PickersInputBase2.PickersInputBaseSectionsContainer, {
   name: 'MuiPickersFilledInput',
   slot: 'sectionsContainer',
-  overridesResolver: (props, styles) => styles.sectionsContainer
+  overridesResolver: (props, styles) => styles.sectionsContainer,
+  shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'hiddenLabel'
 })({
   paddingTop: 25,
   paddingRight: 12,
@@ -144,23 +145,23 @@ const PickersFilledSectionsContainer = (0, _styles.styled)(_PickersInputBase2.Pi
   paddingLeft: 12,
   variants: [{
     props: {
-      size: 'small'
+      inputSize: 'small'
     },
     style: {
       paddingTop: 21,
       paddingBottom: 4
     }
   }, {
-    props: ({
-      startAdornment
-    }) => !!startAdornment,
+    props: {
+      hasStartAdornment: true
+    },
     style: {
       paddingLeft: 0
     }
   }, {
-    props: ({
-      endAdornment
-    }) => !!endAdornment,
+    props: {
+      hasEndAdornment: true
+    },
     style: {
       paddingRight: 0
     }
@@ -175,7 +176,7 @@ const PickersFilledSectionsContainer = (0, _styles.styled)(_PickersInputBase2.Pi
   }, {
     props: {
       hiddenLabel: true,
-      size: 'small'
+      inputSize: 'small'
     },
     style: {
       paddingTop: 8,
@@ -183,18 +184,18 @@ const PickersFilledSectionsContainer = (0, _styles.styled)(_PickersInputBase2.Pi
     }
   }]
 });
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    classes,
-    disableUnderline
+    inputHasUnderline
   } = ownerState;
   const slots = {
-    root: ['root', !disableUnderline && 'underline'],
+    root: ['root', inputHasUnderline && 'underline'],
     input: ['input']
   };
   const composedClasses = (0, _composeClasses.default)(slots, _pickersFilledInputClasses.getPickersFilledInputUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
+
 /**
  * @ignore - internal component.
  */
@@ -206,14 +207,15 @@ const PickersFilledInput = exports.PickersFilledInput = /*#__PURE__*/React.forwa
   const {
       label,
       disableUnderline = false,
-      ownerState: ownerStateProp
+      hiddenLabel = false,
+      classes: classesProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const muiFormControl = (0, _FormControl.useFormControl)();
-  const ownerState = (0, _extends2.default)({}, props, ownerStateProp, muiFormControl, {
-    color: muiFormControl?.color || 'primary'
+  const pickerTextFieldOwnerState = (0, _usePickerTextFieldOwnerState.usePickerTextFieldOwnerState)();
+  const ownerState = (0, _extends2.default)({}, pickerTextFieldOwnerState, {
+    inputHasUnderline: !disableUnderline
   });
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp, ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersInputBase.PickersInputBase, (0, _extends2.default)({
     slots: {
       root: PickersFilledInputRoot,
@@ -222,12 +224,16 @@ const PickersFilledInput = exports.PickersFilledInput = /*#__PURE__*/React.forwa
     slotProps: {
       root: {
         disableUnderline
+      },
+      input: {
+        hiddenLabel
       }
     }
   }, other, {
     label: label,
     classes: classes,
-    ref: ref
+    ref: ref,
+    ownerState: ownerState
   }));
 });
 process.env.NODE_ENV !== "production" ? PickersFilledInput.propTypes = {

package/node/PickersTextField/PickersInput/PickersInput.js

@@ -10,19 +10,21 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _FormControl = require("@mui/material/FormControl");
 var _styles = require("@mui/material/styles");
+var _createStyled = require("@mui/system/createStyled");
 var _utils = require("@mui/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _pickersInputClasses = require("./pickersInputClasses");
 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"];
+const _excluded = ["label", "autoFocus", "disableUnderline", "ownerState", "classes"];
 const PickersInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersInputBaseRoot, {
   name: 'MuiPickersInput',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (props, styles) => styles.root,
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'disableUnderline'
 })(({
   theme
 }) => {
@@ -39,7 +41,7 @@ const PickersInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersInputBase
     // @ts-ignore
     .filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
       props: {
-        color
+        inputColor: color
       },
       style: {
         '&::after': {
@@ -104,18 +106,18 @@ const PickersInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersInputBase
     }]
   };
 });
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    classes,
-    disableUnderline
+    inputHasUnderline
   } = ownerState;
   const slots = {
-    root: ['root', !disableUnderline && 'underline'],
+    root: ['root', !inputHasUnderline && 'underline'],
     input: ['input']
   };
   const composedClasses = (0, _composeClasses.default)(slots, _pickersInputClasses.getPickersInputUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
+
 /**
  * @ignore - internal component.
  */
@@ -127,18 +129,22 @@ const PickersInput = exports.PickersInput = /*#__PURE__*/React.forwardRef(functi
   const {
       label,
       disableUnderline = false,
-      ownerState: ownerStateProp
+      classes: classesProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const muiFormControl = (0, _FormControl.useFormControl)();
-  const ownerState = (0, _extends2.default)({}, props, ownerStateProp, muiFormControl, {
-    disableUnderline,
-    color: muiFormControl?.color || 'primary'
+  const pickerTextFieldOwnerState = (0, _usePickerTextFieldOwnerState.usePickerTextFieldOwnerState)();
+  const ownerState = (0, _extends2.default)({}, pickerTextFieldOwnerState, {
+    inputHasUnderline: !disableUnderline
   });
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp, ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersInputBase.PickersInputBase, (0, _extends2.default)({
     slots: {
       root: PickersInputRoot
+    },
+    slotProps: {
+      root: {
+        disableUnderline
+      }
     }
   }, other, {
     label: label,

package/node/PickersTextField/PickersInput/pickersInputClasses.js

@@ -13,4 +13,4 @@ var _PickersInputBase = require("../PickersInputBase");
 function getPickersInputUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPickersFilledInput', slot);
 }
-const pickersInputClasses = exports.pickersInputClasses = (0, _extends2.default)({}, _PickersInputBase.pickersInputBaseClasses, (0, _generateUtilityClasses.default)('MuiPickersInput', ['root', 'input']));
+const pickersInputClasses = exports.pickersInputClasses = (0, _extends2.default)({}, _PickersInputBase.pickersInputBaseClasses, (0, _generateUtilityClasses.default)('MuiPickersInput', ['root', 'underline', 'input']));