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

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

@@ -1,47 +1,27 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-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"];
 import * as React from 'react';
-import clsx from 'clsx';
-import { styled, alpha, useThemeProps } from '@mui/material/styles';
+import { styled, alpha } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { getPickersMonthUtilityClass, pickersMonthClasses } from "./pickersMonthClasses.js";
 import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
+import { getMonthCalendarUtilityClass, monthCalendarClasses } from "./monthCalendarClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 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 composeClasses(slots, getPickersMonthUtilityClass, classes);
+  return composeClasses(slots, getMonthCalendarUtilityClass, classes);
 };
-const PickersMonthRoot = 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 = styled('button', {
-  name: 'MuiPickersMonth',
-  slot: 'MonthButton',
-  overridesResolver: (_, styles) => [styles.monthButton, {
-    [`&.${pickersMonthClasses.disabled}`]: styles.disabled
+const DefaultMonthButton = styled('button', {
+  name: 'MuiMonthCalendar',
+  slot: 'Button',
+  overridesResolver: (_, styles) => [styles.button, {
+    [`&.${monthCalendarClasses.disabled}`]: styles.disabled
   }, {
-    [`&.${pickersMonthClasses.selected}`]: styles.selected
+    [`&.${monthCalendarClasses.selected}`]: styles.selected
   }]
 })(({
   theme
@@ -51,7 +31,6 @@ const MonthCalendarButton = styled('button', {
   border: 0,
   outline: 0
 }, theme.typography.subtitle1, {
-  margin: '8px 0',
   height: 36,
   width: 72,
   borderRadius: 18,
@@ -66,10 +45,10 @@ const MonthCalendarButton = styled('button', {
     cursor: 'auto',
     pointerEvents: 'none'
   },
-  [`&.${pickersMonthClasses.disabled}`]: {
+  [`&.${monthCalendarClasses.disabled}`]: {
     color: (theme.vars || theme).palette.text.secondary
   },
-  [`&.${pickersMonthClasses.selected}`]: {
+  [`&.${monthCalendarClasses.selected}`]: {
     color: (theme.vars || theme).palette.primary.contrastText,
     backgroundColor: (theme.vars || theme).palette.primary.main,
     '&:focus, &:hover': {
@@ -81,29 +60,17 @@ const MonthCalendarButton = styled('button', {
 /**
  * @ignore - do not document.
  */
-export const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProps) {
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiPickersMonth'
-  });
+export const 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,
@@ -125,32 +92,24 @@ export const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProp
       ref.current?.focus();
     }
   }, [autoFocus]);
-  const MonthButton = slots?.monthButton ?? MonthCalendarButton;
+  const MonthButton = slots?.monthButton ?? DefaultMonthButton;
   const monthButtonProps = useSlotProps({
     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__*/_jsx(PickersMonthRoot, _extends({
-    className: clsx(classes.root, className),
-    ownerState: ownerState
-  }, other, {
-    children: /*#__PURE__*/_jsx(MonthButton, _extends({}, monthButtonProps))
-  }));
+  return /*#__PURE__*/_jsx(MonthButton, _extends({}, monthButtonProps));
 });

package/modern/MonthCalendar/index.js

@@ -1,3 +1,2 @@
 export { MonthCalendar } from "./MonthCalendar.js";
-export { monthCalendarClasses, getMonthCalendarUtilityClass } from "./monthCalendarClasses.js";
-export { pickersMonthClasses } from "./pickersMonthClasses.js";
+export { monthCalendarClasses, getMonthCalendarUtilityClass } from "./monthCalendarClasses.js";

package/modern/MonthCalendar/monthCalendarClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generat
 export function getMonthCalendarUtilityClass(slot) {
   return generateUtilityClass('MuiMonthCalendar', slot);
 }
-export const monthCalendarClasses = generateUtilityClasses('MuiMonthCalendar', ['root']);
+export const monthCalendarClasses = generateUtilityClasses('MuiMonthCalendar', ['root', 'button', 'disabled', 'selected']);

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -189,6 +189,9 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         {
           const valueWithMeridiem = 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/modern/PickersActionBar/PickersActionBar.js

@@ -2,13 +2,14 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onAccept", "onClear", "onCancel", "onSetToday", "actions"];
+const _excluded = ["actions"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import DialogActions from '@mui/material/DialogActions';
 import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
+import { usePickerActionsContext } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickersActionBarRoot = styled(DialogActions, {
   name: 'MuiPickersLayout',
@@ -28,14 +29,16 @@ const PickersActionBarRoot = styled(DialogActions, {
  */
 function PickersActionBar(props) {
   const {
-      onAccept,
-      onClear,
-      onCancel,
-      onSetToday,
       actions
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const translations = usePickerTranslations();
+  const {
+    clearValue,
+    setValueToToday,
+    acceptValueChanges,
+    cancelValueChanges
+  } = usePickerActionsContext();
   if (actions == null || actions.length === 0) {
     return null;
   }
@@ -43,22 +46,22 @@ function PickersActionBar(props) {
     switch (actionType) {
       case 'clear':
         return /*#__PURE__*/_jsx(Button, {
-          onClick: onClear,
+          onClick: clearValue,
           children: translations.clearButtonLabel
         }, actionType);
       case 'cancel':
         return /*#__PURE__*/_jsx(Button, {
-          onClick: onCancel,
+          onClick: cancelValueChanges,
           children: translations.cancelButtonLabel
         }, actionType);
       case 'accept':
         return /*#__PURE__*/_jsx(Button, {
-          onClick: onAccept,
+          onClick: acceptValueChanges,
           children: translations.okButtonLabel
         }, actionType);
       case 'today':
         return /*#__PURE__*/_jsx(Button, {
-          onClick: onSetToday,
+          onClick: setValueToToday,
           children: translations.todayButtonLabel
         }, actionType);
       default:
@@ -85,10 +88,6 @@ process.env.NODE_ENV !== "production" ? PickersActionBar.propTypes = {
    * @default false
    */
   disableSpacing: PropTypes.bool,
-  onAccept: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  onClear: PropTypes.func.isRequired,
-  onSetToday: PropTypes.func.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/PickersLayout/PickersLayout.js

@@ -151,16 +151,8 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   classes: PropTypes.object,
   className: PropTypes.string,
   isValid: PropTypes.func.isRequired,
-  onAccept: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
-  onClear: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onDismiss: PropTypes.func.isRequired,
-  onOpen: PropTypes.func.isRequired,
   onSelectShortcut: PropTypes.func.isRequired,
-  onSetToday: PropTypes.func.isRequired,
-  onViewChange: PropTypes.func.isRequired,
   /**
    * The props used for each component slot.
    * @default {}
@@ -175,8 +167,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
-  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
+  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object])
 } : void 0;
 export { PickersLayout };

package/modern/PickersLayout/usePickerLayout.js

@@ -35,17 +35,11 @@ const usePickerLayout = props => {
   } = usePickerPrivateContext();
   const {
     variant,
-    orientation
+    orientation,
+    view
   } = usePickerContext();
   const isRtl = useRtl();
   const {
-    onAccept,
-    onClear,
-    onCancel,
-    onSetToday,
-    view,
-    views,
-    onViewChange,
     value,
     onChange,
     onSelectShortcut,
@@ -70,10 +64,6 @@ const usePickerLayout = props => {
     elementType: ActionBar,
     externalSlotProps: slotProps?.actionBar,
     additionalProps: {
-      onAccept,
-      onClear,
-      onCancel,
-      onSetToday,
       actions: variant === 'desktop' ? [] : ['cancel', 'accept']
     },
     className: classes.actionBar,
@@ -90,10 +80,7 @@ const usePickerLayout = props => {
       isLandscape: orientation === 'landscape',
       // Will be removed in a follow up PR?
       onChange,
-      value,
-      view,
-      onViewChange,
-      views
+      value
     },
     className: classes.toolbar,
     ownerState
@@ -106,8 +93,6 @@ const usePickerLayout = props => {
   // Tabs
   const Tabs = slots?.tabs;
   const tabs = view && Tabs ? /*#__PURE__*/_jsx(Tabs, _extends({
-    view: view,
-    onViewChange: onViewChange,
     className: classes.tabs
   }, slotProps?.tabs)) : null;
 

package/modern/PickersSectionList/PickersSectionList.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "elements", "sectionListRef"];
+const _excluded = ["slots", "slotProps", "elements", "sectionListRef", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
@@ -10,6 +10,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import useForkRef from '@mui/utils/useForkRef';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { getPickersSectionListUtilityClass, pickersSectionListClasses } from "./pickersSectionListClasses.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const PickersSectionListRoot = styled('div', {
   name: 'MuiPickersSectionList',
@@ -38,10 +39,7 @@ export const PickersSectionListSectionContent = styled('span', {
 })({
   outline: 'none'
 });
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     section: ['section'],
@@ -56,13 +54,16 @@ function PickersSection(props) {
     element,
     classes
   } = props;
+  const {
+    ownerState
+  } = usePickerPrivateContext();
   const Section = slots?.section ?? PickersSectionListSection;
   const sectionProps = useSlotProps({
     elementType: Section,
     externalSlotProps: slotProps?.section,
     externalForwardedProps: element.container,
     className: classes.section,
-    ownerState: {}
+    ownerState
   });
   const SectionContent = slots?.sectionContent ?? PickersSectionListSectionContent;
   const sectionContentProps = useSlotProps({
@@ -73,24 +74,24 @@ function PickersSection(props) {
       suppressContentEditableWarning: true
     },
     className: classes.sectionContent,
-    ownerState: {}
+    ownerState
   });
   const SectionSeparator = slots?.sectionSeparator ?? PickersSectionListSectionSeparator;
   const sectionSeparatorBeforeProps = useSlotProps({
     elementType: SectionSeparator,
     externalSlotProps: slotProps?.sectionSeparator,
     externalForwardedProps: element.before,
-    ownerState: {
-      position: 'before'
-    }
+    ownerState: _extends({}, ownerState, {
+      separatorPosition: 'before'
+    })
   });
   const sectionSeparatorAfterProps = useSlotProps({
     elementType: SectionSeparator,
     externalSlotProps: slotProps?.sectionSeparator,
     externalForwardedProps: element.after,
-    ownerState: {
-      position: 'after'
-    }
+    ownerState: _extends({}, ownerState, {
+      separatorPosition: 'after'
+    })
   });
   return /*#__PURE__*/_jsxs(Section, _extends({}, sectionProps, {
     children: [/*#__PURE__*/_jsx(SectionSeparator, _extends({}, sectionSeparatorBeforeProps)), /*#__PURE__*/_jsx(SectionContent, _extends({}, sectionContentProps)), /*#__PURE__*/_jsx(SectionSeparator, _extends({}, sectionSeparatorAfterProps))]
@@ -135,10 +136,14 @@ const PickersSectionList = /*#__PURE__*/React.forwardRef(function PickersSection
       slots,
       slotProps,
       elements,
-      sectionListRef
+      sectionListRef,
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
+  const {
+    ownerState
+  } = usePickerPrivateContext();
   const rootRef = React.useRef(null);
   const handleRootRef = useForkRef(ref, rootRef);
   const getRoot = methodName => {
@@ -186,7 +191,7 @@ const PickersSectionList = /*#__PURE__*/React.forwardRef(function PickersSection
       suppressContentEditableWarning: true
     },
     className: classes.root,
-    ownerState: {}
+    ownerState
   });
   return /*#__PURE__*/_jsx(Root, _extends({}, rootProps, {
     children: rootProps.contentEditable ? elements.map(({

package/modern/PickersTextField/PickersFilledInput/PickersFilledInput.js

@@ -1,9 +1,8 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["label", "autoFocus", "disableUnderline", "ownerState"];
+const _excluded = ["label", "autoFocus", "disableUnderline", "hiddenLabel", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useFormControl } from '@mui/material/FormControl';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { shouldForwardProp } from '@mui/system';
 import { refType } from '@mui/utils';
@@ -11,6 +10,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import { pickersFilledInputClasses, getPickersFilledInputUtilityClass } from "./pickersFilledInputClasses.js";
 import { PickersInputBase } from "../PickersInputBase/index.js";
 import { PickersInputBaseRoot, PickersInputBaseSectionsContainer } from "../PickersInputBase/PickersInputBase.js";
+import { usePickerTextFieldOwnerState } from "../usePickerTextFieldOwnerState.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
   name: 'MuiPickersFilledInput',
@@ -50,7 +50,7 @@ const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
     // @ts-ignore
     .filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
       props: {
-        color,
+        inputColor: color,
         disableUnderline: false
       },
       style: {
@@ -109,16 +109,16 @@ const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
         }
       }
     }, {
-      props: ({
-        startAdornment
-      }) => !!startAdornment,
+      props: {
+        hasStartAdornment: true
+      },
       style: {
         paddingLeft: 12
       }
     }, {
-      props: ({
-        endAdornment
-      }) => !!endAdornment,
+      props: {
+        hasEndAdornment: true
+      },
       style: {
         paddingRight: 12
       }
@@ -128,7 +128,8 @@ const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
 const PickersFilledSectionsContainer = styled(PickersInputBaseSectionsContainer, {
   name: 'MuiPickersFilledInput',
   slot: 'sectionsContainer',
-  overridesResolver: (props, styles) => styles.sectionsContainer
+  overridesResolver: (props, styles) => styles.sectionsContainer,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'hiddenLabel'
 })({
   paddingTop: 25,
   paddingRight: 12,
@@ -136,23 +137,23 @@ const PickersFilledSectionsContainer = styled(PickersInputBaseSectionsContainer,
   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
     }
@@ -167,7 +168,7 @@ const PickersFilledSectionsContainer = styled(PickersInputBaseSectionsContainer,
   }, {
     props: {
       hiddenLabel: true,
-      size: 'small'
+      inputSize: 'small'
     },
     style: {
       paddingTop: 8,
@@ -175,18 +176,18 @@ const PickersFilledSectionsContainer = styled(PickersInputBaseSectionsContainer,
     }
   }]
 });
-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 = composeClasses(slots, getPickersFilledInputUtilityClass, classes);
   return _extends({}, classes, composedClasses);
 };
+
 /**
  * @ignore - internal component.
  */
@@ -198,14 +199,15 @@ const PickersFilledInput = /*#__PURE__*/React.forwardRef(function PickersFilledI
   const {
       label,
       disableUnderline = false,
-      ownerState: ownerStateProp
+      hiddenLabel = false,
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const muiFormControl = useFormControl();
-  const ownerState = _extends({}, props, ownerStateProp, muiFormControl, {
-    color: muiFormControl?.color || 'primary'
+  const pickerTextFieldOwnerState = usePickerTextFieldOwnerState();
+  const ownerState = _extends({}, pickerTextFieldOwnerState, {
+    inputHasUnderline: !disableUnderline
   });
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp, ownerState);
   return /*#__PURE__*/_jsx(PickersInputBase, _extends({
     slots: {
       root: PickersFilledInputRoot,
@@ -214,12 +216,16 @@ const PickersFilledInput = /*#__PURE__*/React.forwardRef(function PickersFilledI
     slotProps: {
       root: {
         disableUnderline
+      },
+      input: {
+        hiddenLabel
       }
     }
   }, other, {
     label: label,
     classes: classes,
-    ref: ref
+    ref: ref,
+    ownerState: ownerState
   }));
 });
 process.env.NODE_ENV !== "production" ? PickersFilledInput.propTypes = {

package/modern/PickersTextField/PickersInput/PickersInput.js

@@ -1,20 +1,22 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["label", "autoFocus", "disableUnderline", "ownerState"];
+const _excluded = ["label", "autoFocus", "disableUnderline", "ownerState", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useFormControl } from '@mui/material/FormControl';
 import { styled, useThemeProps } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import { refType } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { pickersInputClasses, getPickersInputUtilityClass } from "./pickersInputClasses.js";
 import { PickersInputBase } from "../PickersInputBase/index.js";
 import { PickersInputBaseRoot } from "../PickersInputBase/PickersInputBase.js";
+import { usePickerTextFieldOwnerState } from "../usePickerTextFieldOwnerState.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickersInputRoot = styled(PickersInputBaseRoot, {
   name: 'MuiPickersInput',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (props, styles) => styles.root,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'disableUnderline'
 })(({
   theme
 }) => {
@@ -31,7 +33,7 @@ const PickersInputRoot = styled(PickersInputBaseRoot, {
     // @ts-ignore
     .filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
       props: {
-        color
+        inputColor: color
       },
       style: {
         '&::after': {
@@ -96,18 +98,18 @@ const PickersInputRoot = styled(PickersInputBaseRoot, {
     }]
   };
 });
-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 = composeClasses(slots, getPickersInputUtilityClass, classes);
   return _extends({}, classes, composedClasses);
 };
+
 /**
  * @ignore - internal component.
  */
@@ -119,18 +121,22 @@ const PickersInput = /*#__PURE__*/React.forwardRef(function PickersInput(inProps
   const {
       label,
       disableUnderline = false,
-      ownerState: ownerStateProp
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const muiFormControl = useFormControl();
-  const ownerState = _extends({}, props, ownerStateProp, muiFormControl, {
-    disableUnderline,
-    color: muiFormControl?.color || 'primary'
+  const pickerTextFieldOwnerState = usePickerTextFieldOwnerState();
+  const ownerState = _extends({}, pickerTextFieldOwnerState, {
+    inputHasUnderline: !disableUnderline
   });
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp, ownerState);
   return /*#__PURE__*/_jsx(PickersInputBase, _extends({
     slots: {
       root: PickersInputRoot
+    },
+    slotProps: {
+      root: {
+        disableUnderline
+      }
     }
   }, other, {
     label: label,