@mui/lab 5.0.0-alpha.65 → 5.0.0-alpha.69

package/internal/pickers/PickersToolbar.js

@@ -15,9 +15,7 @@ import ClockIcon from '../svg-icons/Clock';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const classes = generateUtilityClasses('PrivatePickersToolbar', ['root', 'dateTitleContainer']);
-const PickersToolbarRoot = styled('div', {
-  skipSx: true
-})(({
+const PickersToolbarRoot = styled('div')(({
   theme,
   ownerState
 }) => _extends({
@@ -33,9 +31,7 @@ const PickersToolbarRoot = styled('div', {
   justifyContent: 'flex-start',
   flexWrap: 'wrap'
 }));
-const PickersToolbarGrid = styled(Grid, {
-  skipSx: true
-})({
+const PickersToolbarGrid = styled(Grid)({
   flex: 1
 });
 

package/internal/pickers/PickersToolbarButton.js

@@ -6,9 +6,7 @@ import Button from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
 import PickersToolbarText from './PickersToolbarText';
 import { jsx as _jsx } from "react/jsx-runtime";
-const PickersToolbarButtonRoot = styled(Button, {
-  skipSx: true
-})({
+const PickersToolbarButtonRoot = styled(Button)({
   padding: 0,
   minWidth: 16,
   textTransform: 'none'

package/internal/pickers/PickersToolbarText.js

@@ -8,9 +8,7 @@ import { styled } from '@mui/material/styles';
 import { generateUtilityClasses } from '@mui/base';
 import { jsx as _jsx } from "react/jsx-runtime";
 const classes = generateUtilityClasses('PrivatePickersToolbarText', ['selected']);
-const PickersToolbarTextRoot = styled(Typography, {
-  skipSx: true
-})(({
+const PickersToolbarTextRoot = styled(Typography)(({
   theme
 }) => ({
   transition: theme.transitions.create('color'),

package/internal/pickers/hooks/usePickerState.js

@@ -43,9 +43,10 @@ export function usePickerState(props, valueManager) {
       type: 'reset',
       payload: parsedDateValue
     });
-  } // Mobile keyboard view is a special case.
-  // When it's open picker should work like closed, cause we are just showing text field
+  }
 
+  const [initialDate, setInitialDate] = React.useState(draftState.committed); // Mobile keyboard view is a special case.
+  // When it's open picker should work like closed, cause we are just showing text field
 
   const [isMobileKeyboardViewOpen, setMobileKeyboardViewOpen] = React.useState(false);
   const acceptDate = React.useCallback((acceptedDate, needClosePicker) => {
@@ -53,6 +54,7 @@ export function usePickerState(props, valueManager) {
 
     if (needClosePicker) {
       setIsOpen(false);
+      setInitialDate(acceptedDate);
 
       if (onAccept) {
         onAccept(acceptedDate);
@@ -63,7 +65,7 @@ export function usePickerState(props, valueManager) {
     open: isOpen,
     onClear: () => acceptDate(valueManager.emptyValue, true),
     onAccept: () => acceptDate(draftState.draft, true),
-    onDismiss: () => setIsOpen(false),
+    onDismiss: () => acceptDate(initialDate, true),
     onSetToday: () => {
       const now = utils.date();
       dispatch({
@@ -72,7 +74,7 @@ export function usePickerState(props, valueManager) {
       });
       acceptDate(now, !disableCloseOnSelect);
     }
-  }), [acceptDate, disableCloseOnSelect, isOpen, utils, draftState.draft, setIsOpen, valueManager.emptyValue]);
+  }), [acceptDate, disableCloseOnSelect, isOpen, utils, draftState.draft, valueManager.emptyValue, initialDate]);
   const pickerProps = React.useMemo(() => ({
     date: draftState.draft,
     isMobileKeyboardViewOpen,

package/internal/pickers/wrappers/DesktopWrapper.js

@@ -15,7 +15,10 @@ function DesktopWrapper(props) {
     open,
     PopperProps,
     PaperProps,
-    TransitionComponent
+    TransitionComponent,
+    onClear,
+    clearText,
+    clearable
   } = props;
   const ownInputRef = React.useRef(null);
   const inputRef = useForkRef(DateInputProps.inputRef, ownInputRef);
@@ -31,6 +34,9 @@ function DesktopWrapper(props) {
       PopperProps: PopperProps,
       PaperProps: PaperProps,
       onClose: onDismiss,
+      onClear: onClear,
+      clearText: clearText,
+      clearable: clearable,
       children: children
     })]
   });

package/internal/pickers/wrappers/PickerStaticWrapper.js

@@ -25,8 +25,7 @@ const useUtilityClasses = ownerState => {
 const PickerStaticWrapperRoot = styled('div', {
   name: 'MuiPickerStaticWrapper',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root,
-  skipSx: true
+  overridesResolver: (props, styles) => styles.root
 })(({
   theme
 }) => ({

package/legacy/CalendarPicker/PickersCalendar.js

@@ -12,16 +12,12 @@ import SlideTransition from './PickersSlideTransition';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 4) * 6;
-var PickersCalendarDayHeader = styled('div', {
-  skipSx: true
-})({
+var PickersCalendarDayHeader = styled('div')({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center'
 });
-var PickersCalendarWeekDayLabel = styled(Typography, {
-  skipSx: true
-})(function (_ref) {
+var PickersCalendarWeekDayLabel = styled(Typography)(function (_ref) {
   var theme = _ref.theme;
   return {
     width: 36,
@@ -34,27 +30,19 @@ var PickersCalendarWeekDayLabel = styled(Typography, {
     color: theme.palette.text.secondary
   };
 });
-var PickersCalendarLoadingContainer = styled('div', {
-  skipSx: true
-})({
+var PickersCalendarLoadingContainer = styled('div')({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   minHeight: weeksContainerHeight
 });
-var PickersCalendarSlideTransition = styled(SlideTransition, {
-  skipSx: true
-})({
+var PickersCalendarSlideTransition = styled(SlideTransition)({
   minHeight: weeksContainerHeight
 });
-var PickersCalendarWeekContainer = styled('div', {
-  skipSx: true
-})({
+var PickersCalendarWeekContainer = styled('div')({
   overflow: 'hidden'
 });
-var PickersCalendarWeek = styled('div', {
-  skipSx: true
-})({
+var PickersCalendarWeek = styled('div')({
   margin: "".concat(DAY_MARGIN, "px 0"),
   display: 'flex',
   justifyContent: 'center'

package/legacy/CalendarPicker/PickersCalendarHeader.js

@@ -11,9 +11,7 @@ import PickersArrowSwitcher from '../internal/pickers/PickersArrowSwitcher';
 import { usePreviousMonthDisabled, useNextMonthDisabled } from '../internal/pickers/hooks/date-helpers-hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var PickersCalendarHeaderRoot = styled('div', {
-  skipSx: true
-})({
+var PickersCalendarHeaderRoot = styled('div')({
   display: 'flex',
   alignItems: 'center',
   marginTop: 16,
@@ -24,9 +22,7 @@ var PickersCalendarHeaderRoot = styled('div', {
   maxHeight: 30,
   minHeight: 30
 });
-var PickersCalendarHeaderLabel = styled('div', {
-  skipSx: true
-})(function (_ref) {
+var PickersCalendarHeaderLabel = styled('div')(function (_ref) {
   var theme = _ref.theme;
   return _extends({
     display: 'flex',
@@ -39,19 +35,13 @@ var PickersCalendarHeaderLabel = styled('div', {
     fontWeight: theme.typography.fontWeightMedium
   });
 });
-var PickersCalendarHeaderLabelItem = styled('div', {
-  skipSx: true
-})({
+var PickersCalendarHeaderLabelItem = styled('div')({
   marginRight: 6
 });
-var PickersCalendarHeaderSwitchViewButton = styled(IconButton, {
-  skipSx: true
-})({
+var PickersCalendarHeaderSwitchViewButton = styled(IconButton)({
   marginRight: 'auto'
 });
-var PickersCalendarHeaderSwitchView = styled(ArrowDropDownIcon, {
-  skipSx: true
-})(function (_ref2) {
+var PickersCalendarHeaderSwitchView = styled(ArrowDropDownIcon)(function (_ref2) {
   var theme = _ref2.theme,
       ownerState = _ref2.ownerState;
   return _extends({

package/legacy/CalendarPicker/PickersFadeTransitionGroup.js

@@ -7,9 +7,7 @@ import { TransitionGroup } from 'react-transition-group';
 import { jsx as _jsx } from "react/jsx-runtime";
 var classes = generateUtilityClasses('PrivatePickersFadeTransitionGroup', ['root']);
 var animationDuration = 500;
-var PickersFadeTransitionGroupRoot = styled(TransitionGroup, {
-  skipSx: true
-})({
+var PickersFadeTransitionGroupRoot = styled(TransitionGroup)({
   display: 'block',
   position: 'relative'
 });

package/legacy/CalendarPicker/PickersSlideTransition.js

@@ -9,9 +9,7 @@ import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { jsx as _jsx } from "react/jsx-runtime";
 var classes = generateUtilityClasses('PrivatePickersSlideTransition', ['root', 'slideEnter-left', 'slideEnter-right', 'slideEnterActive', 'slideEnterActive', 'slideExit', 'slideExitActiveLeft-left', 'slideExitActiveLeft-right']);
 export var slideAnimationDuration = 350;
-var PickersSlideTransitionRoot = styled(TransitionGroup, {
-  skipSx: true
-})(function (_ref) {
+var PickersSlideTransitionRoot = styled(TransitionGroup)(function (_ref) {
   var _ref2;
 
   var theme = _ref.theme;

package/legacy/ClockPicker/Clock.js

@@ -13,9 +13,7 @@ import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVaria
 import { getHours, getMinutes } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var ClockRoot = styled('div', {
-  skipSx: true
-})(function (_ref) {
+var ClockRoot = styled('div')(function (_ref) {
   var theme = _ref.theme;
   return {
     display: 'flex',
@@ -24,9 +22,7 @@ var ClockRoot = styled('div', {
     margin: theme.spacing(2)
   };
 });
-var ClockClock = styled('div', {
-  skipSx: true
-})({
+var ClockClock = styled('div')({
   backgroundColor: 'rgba(0,0,0,.07)',
   borderRadius: '50%',
   height: 220,
@@ -35,9 +31,7 @@ var ClockClock = styled('div', {
   position: 'relative',
   pointerEvents: 'none'
 });
-var ClockSquareMask = styled('div', {
-  skipSx: true
-})({
+var ClockSquareMask = styled('div')({
   width: '100%',
   height: '100%',
   position: 'absolute',
@@ -54,9 +48,7 @@ var ClockSquareMask = styled('div', {
     cursor: 'move'
   }
 });
-var ClockPin = styled('div', {
-  skipSx: true
-})(function (_ref2) {
+var ClockPin = styled('div')(function (_ref2) {
   var theme = _ref2.theme;
   return {
     width: 6,
@@ -69,9 +61,7 @@ var ClockPin = styled('div', {
     transform: 'translate(-50%, -50%)'
   };
 });
-var ClockAmButton = styled(IconButton, {
-  skipSx: true
-})(function (_ref3) {
+var ClockAmButton = styled(IconButton)(function (_ref3) {
   var theme = _ref3.theme,
       ownerState = _ref3.ownerState;
   return _extends({
@@ -87,9 +77,7 @@ var ClockAmButton = styled(IconButton, {
     }
   });
 });
-var ClockPmButton = styled(IconButton, {
-  skipSx: true
-})(function (_ref4) {
+var ClockPmButton = styled(IconButton)(function (_ref4) {
   var theme = _ref4.theme,
       ownerState = _ref4.ownerState;
   return _extends({

package/legacy/ClockPicker/ClockNumber.js

@@ -8,9 +8,7 @@ import { generateUtilityClasses } from '@mui/base';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var classes = generateUtilityClasses('PrivateClockNumber', ['selected', 'disabled']);
-var ClockNumberRoot = styled('span', {
-  skipSx: true
-})(function (_ref) {
+var ClockNumberRoot = styled('span')(function (_ref) {
   var _extends2;
 
   var theme = _ref.theme,
@@ -25,6 +23,7 @@ var ClockNumberRoot = styled('span', {
     alignItems: 'center',
     borderRadius: '50%',
     color: theme.palette.text.primary,
+    fontFamily: theme.typography.fontFamily,
     '&:focused': {
       backgroundColor: theme.palette.background.paper
     }

package/legacy/ClockPicker/ClockPointer.js

@@ -14,9 +14,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
-var ClockPointerRoot = styled('div', {
-  skipSx: true
-})(function (_ref) {
+var ClockPointerRoot = styled('div')(function (_ref) {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({
@@ -30,9 +28,7 @@ var ClockPointerRoot = styled('div', {
     transition: theme.transitions.create(['transform', 'height'])
   });
 });
-var ClockPointerThumb = styled('div', {
-  skipSx: true
-})(function (_ref2) {
+var ClockPointerThumb = styled('div')(function (_ref2) {
   var theme = _ref2.theme,
       ownerState = _ref2.ownerState;
   return _extends({

package/legacy/DatePicker/DatePicker.js

@@ -42,7 +42,9 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker(inProps, ref)
   return isDesktop ? /*#__PURE__*/_jsx(DesktopDatePicker, _extends({
     ref: ref,
     PopperProps: PopperProps,
-    TransitionComponent: TransitionComponent
+    TransitionComponent: TransitionComponent,
+    clearText: clearText,
+    clearable: clearable
   }, other)) : /*#__PURE__*/_jsx(MobileDatePicker, _extends({
     ref: ref,
     cancelText: cancelText,

package/legacy/DatePicker/DatePickerToolbar.js

@@ -10,15 +10,11 @@ import { useUtils } from '../internal/pickers/hooks/useUtils';
 import { isYearAndMonthViews, isYearOnlyView } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
 var classes = generateUtilityClasses('PrivateDatePickerToolbar', ['penIcon']);
-var DatePickerToolbarRoot = styled(PickersToolbar, {
-  skipSx: true
-})(_defineProperty({}, "& .".concat(classes.penIcon), {
+var DatePickerToolbarRoot = styled(PickersToolbar)(_defineProperty({}, "& .".concat(classes.penIcon), {
   position: 'relative',
   top: 4
 }));
-var DatePickerToolbarTitle = styled(Typography, {
-  skipSx: true
-})(function (_ref) {
+var DatePickerToolbarTitle = styled(Typography)(function (_ref) {
   var ownerState = _ref.ownerState;
   return _extends({}, ownerState.isLandscape && {
     margin: 'auto 16px auto auto'

package/legacy/DateRangePicker/DateRangePickerInput.js

@@ -9,9 +9,7 @@ import { useMaskedInput } from '../internal/pickers/hooks/useMaskedInput';
 import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVariantContext';
 import { executeInTheNextEventLoopTick } from '../internal/pickers/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-var DateRangePickerInputRoot = styled('div', {
-  skipSx: true
-})(function (_ref) {
+var DateRangePickerInputRoot = styled('div')(function (_ref) {
   var theme = _ref.theme;
   return _defineProperty({
     display: 'flex',

package/legacy/DateRangePicker/DateRangePickerToolbar.js

@@ -13,15 +13,11 @@ import PickersToolbarButton from '../internal/pickers/PickersToolbarButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var classes = generateUtilityClasses('PrivateDateRangePickerToolbar', ['penIcon']);
-var DateRangePickerToolbarRoot = styled(PickersToolbar, {
-  skipSx: true
-})(_defineProperty({}, "& .".concat(classes.penIcon), {
+var DateRangePickerToolbarRoot = styled(PickersToolbar)(_defineProperty({}, "& .".concat(classes.penIcon), {
   position: 'relative',
   top: 4
 }));
-var DateRangePickerToolbarContainer = styled('div', {
-  skipSx: true
-})({
+var DateRangePickerToolbarContainer = styled('div')({
   display: 'flex'
 });
 /**

package/legacy/DateRangePicker/DateRangePickerViewDesktop.js

@@ -13,15 +13,11 @@ import { doNothing } from '../internal/pickers/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var DateRangePickerViewDesktopRoot = styled('div', {
-  skipSx: true
-})({
+var DateRangePickerViewDesktopRoot = styled('div')({
   display: 'flex',
   flexDirection: 'row'
 });
-var DateRangePickerViewDesktopContainer = styled('div', {
-  skipSx: true
-})(function (_ref) {
+var DateRangePickerViewDesktopContainer = styled('div')(function (_ref) {
   var theme = _ref.theme;
   return {
     '&:not(:last-of-type)': {
@@ -29,15 +25,11 @@ var DateRangePickerViewDesktopContainer = styled('div', {
     }
   };
 });
-var DateRangePickerViewDesktopCalendar = styled(PickersCalendar, {
-  skipSx: true
-})({
+var DateRangePickerViewDesktopCalendar = styled(PickersCalendar)({
   minWidth: 312,
   minHeight: 288
 });
-var DateRangePickerViewDesktopArrowSwitcher = styled(PickersArrowSwitcher, {
-  skipSx: true
-})({
+var DateRangePickerViewDesktopArrowSwitcher = styled(PickersArrowSwitcher)({
   padding: '16px 16px 8px 16px',
   display: 'flex',
   alignItems: 'center',

package/legacy/DateTimePicker/DateTimePickerTabs.js

@@ -15,7 +15,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 
 var viewToTab = function viewToTab(openView) {
   // TODO: what happens if `openView` is `month`?
-  if (openView === 'day' || openView === 'year') {
+  if (['day', 'month', 'year'].includes(openView)) {
     return 'date';
   }
 
@@ -30,9 +30,7 @@ var tabToView = function tabToView(tab) {
   return 'hours';
 };
 
-var DateTimePickerTabsRoot = styled(Tabs, {
-  skipSx: true
-})(function (_ref) {
+var DateTimePickerTabsRoot = styled(Tabs)(function (_ref) {
   var ownerState = _ref.ownerState,
       theme = _ref.theme;
   return _extends({

package/legacy/DateTimePicker/DateTimePickerToolbar.js

@@ -16,9 +16,7 @@ import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVaria
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var classes = generateUtilityClasses('PrivateDateTimePickerToolbar', ['penIcon']);
-var DateTimePickerToolbarRoot = styled(PickersToolbar, {
-  skipSx: true
-})(_defineProperty({
+var DateTimePickerToolbarRoot = styled(PickersToolbar)(_defineProperty({
   paddingLeft: 16,
   paddingRight: 16,
   justifyContent: 'space-around'
@@ -27,21 +25,15 @@ var DateTimePickerToolbarRoot = styled(PickersToolbar, {
   top: 8,
   right: 8
 }));
-var DateTimePickerToolbarDateContainer = styled('div', {
-  skipSx: true
-})({
+var DateTimePickerToolbarDateContainer = styled('div')({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start'
 });
-var DateTimePickerToolbarTimeContainer = styled('div', {
-  skipSx: true
-})({
+var DateTimePickerToolbarTimeContainer = styled('div')({
   display: 'flex'
 });
-var DateTimePickerToolbarSeparator = styled(PickersToolbarText, {
-  skipSx: true
-})({
+var DateTimePickerToolbarSeparator = styled(PickersToolbarText)({
   margin: '0 4px 0 2px',
   cursor: 'default'
 });

package/legacy/DesktopDatePicker/DesktopDatePicker.js

@@ -46,7 +46,9 @@ var DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePicker
       ToolbarComponent = _props$ToolbarCompone === void 0 ? DatePickerToolbar : _props$ToolbarCompone,
       TransitionComponent = props.TransitionComponent,
       value = props.value,
-      other = _objectWithoutProperties(props, ["onChange", "PopperProps", "PaperProps", "ToolbarComponent", "TransitionComponent", "value"]);
+      clearText = props.clearText,
+      clearable = props.clearable,
+      other = _objectWithoutProperties(props, ["onChange", "PopperProps", "PaperProps", "ToolbarComponent", "TransitionComponent", "value", "clearText", "clearable"]);
 
   var AllDateInputProps = _extends({}, inputProps, other, {
     ref: ref,
@@ -59,6 +61,8 @@ var DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePicker
     PopperProps: PopperProps,
     PaperProps: PaperProps,
     TransitionComponent: TransitionComponent,
+    clearText: clearText,
+    clearable: clearable,
     children: /*#__PURE__*/_jsx(Picker, _extends({}, pickerProps, {
       autoFocus: true,
       toolbarTitle: props.label || props.toolbarTitle,
@@ -102,6 +106,18 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * If `true`, it shows the clear action in the picker dialog.
+   * @default false
+   */
+  clearable: PropTypes.bool,
+
+  /**
+   * Clear text message.
+   * @default 'Clear'
+   */
+  clearText: PropTypes.node,
+
   /**
    * The components used for each slot.
    * Either a string to use a HTML element or a component.

package/legacy/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -147,6 +147,18 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * If `true`, it shows the clear action in the picker dialog.
+   * @default false
+   */
+  clearable: PropTypes.bool,
+
+  /**
+   * Clear text message.
+   * @default 'Clear'
+   */
+  clearText: PropTypes.node,
+
   /**
    * The components used for each slot.
    * Either a string to use a HTML element or a component.

package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -112,6 +112,18 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * If `true`, it shows the clear action in the picker dialog.
+   * @default false
+   */
+  clearable: PropTypes.bool,
+
+  /**
+   * Clear text message.
+   * @default 'Clear'
+   */
+  clearText: PropTypes.node,
+
   /**
    * The components used for each slot.
    * Either a string to use a HTML element or a component.

package/legacy/DesktopTimePicker/DesktopTimePicker.js

@@ -101,6 +101,18 @@ process.env.NODE_ENV !== "production" ? DesktopTimePicker.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * If `true`, it shows the clear action in the picker dialog.
+   * @default false
+   */
+  clearable: PropTypes.bool,
+
+  /**
+   * Clear text message.
+   * @default 'Clear'
+   */
+  clearText: PropTypes.node,
+
   /**
    * The components used for each slot.
    * Either a string to use a HTML element or a component.

package/legacy/LoadingButton/LoadingButton.js

@@ -229,6 +229,8 @@ process.env.NODE_ENV !== "production" ? LoadingButton.propTypes
    * The variant to use.
    * @default 'text'
    */
-  variant: PropTypes.oneOf(['contained', 'outlined', 'text'])
+  variant: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.oneOf(['contained', 'outlined', 'text']), PropTypes.string])
 } : void 0;
 export default LoadingButton;

package/legacy/MonthPicker/PickersMonth.js

@@ -9,9 +9,7 @@ import { generateUtilityClasses } from '@mui/base';
 import { onSpaceOrEnter } from '../internal/pickers/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 var classes = generateUtilityClasses('PrivatePickersMonth', ['root', 'selected']);
-var PickersMonthRoot = styled(Typography, {
-  skipSx: true
-})(function (_ref) {
+var PickersMonthRoot = styled(Typography)(function (_ref) {
   var theme = _ref.theme;
   return _extends({
     flex: '1 0 33.33%',

package/legacy/TimePicker/TimePickerToolbar.js

@@ -32,21 +32,15 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getTimePickerToolbarUtilityClass, classes);
 };
 
-var TimePickerToolbarRoot = styled(PickersToolbar, {
-  skipSx: true
-})(_defineProperty({}, "& .".concat(timePickerToolbarClasses.penIconLandscape), {
+var TimePickerToolbarRoot = styled(PickersToolbar)(_defineProperty({}, "& .".concat(timePickerToolbarClasses.penIconLandscape), {
   marginTop: 'auto'
 }));
-var TimePickerToolbarSeparator = styled(PickersToolbarText, {
-  skipSx: true
-})({
+var TimePickerToolbarSeparator = styled(PickersToolbarText)({
   outline: 0,
   margin: '0 4px 0 2px',
   cursor: 'default'
 });
-var TimePickerToolbarHourMinuteLabel = styled('div', {
-  skipSx: true
-})(function (_ref) {
+var TimePickerToolbarHourMinuteLabel = styled('div')(function (_ref) {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({
@@ -59,9 +53,7 @@ var TimePickerToolbarHourMinuteLabel = styled('div', {
     flexDirection: 'row-reverse'
   });
 });
-var TimePickerToolbarAmPmSelection = styled('div', {
-  skipSx: true
-})(function (_ref2) {
+var TimePickerToolbarAmPmSelection = styled('div')(function (_ref2) {
   var ownerState = _ref2.ownerState;
   return _extends({
     display: 'flex',