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

package/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";
-const ClockRoot = styled('div', {
-  skipSx: true
-})(({
+const ClockRoot = styled('div')(({
   theme
 }) => ({
   display: 'flex',
@@ -23,9 +21,7 @@ const ClockRoot = styled('div', {
   alignItems: 'center',
   margin: theme.spacing(2)
 }));
-const ClockClock = styled('div', {
-  skipSx: true
-})({
+const ClockClock = styled('div')({
   backgroundColor: 'rgba(0,0,0,.07)',
   borderRadius: '50%',
   height: 220,
@@ -34,9 +30,7 @@ const ClockClock = styled('div', {
   position: 'relative',
   pointerEvents: 'none'
 });
-const ClockSquareMask = styled('div', {
-  skipSx: true
-})({
+const ClockSquareMask = styled('div')({
   width: '100%',
   height: '100%',
   position: 'absolute',
@@ -53,9 +47,7 @@ const ClockSquareMask = styled('div', {
     cursor: 'move'
   }
 });
-const ClockPin = styled('div', {
-  skipSx: true
-})(({
+const ClockPin = styled('div')(({
   theme
 }) => ({
   width: 6,
@@ -67,9 +59,7 @@ const ClockPin = styled('div', {
   left: '50%',
   transform: 'translate(-50%, -50%)'
 }));
-const ClockAmButton = styled(IconButton, {
-  skipSx: true
-})(({
+const ClockAmButton = styled(IconButton)(({
   theme,
   ownerState
 }) => _extends({
@@ -84,9 +74,7 @@ const ClockAmButton = styled(IconButton, {
     backgroundColor: theme.palette.primary.light
   }
 }));
-const ClockPmButton = styled(IconButton, {
-  skipSx: true
-})(({
+const ClockPmButton = styled(IconButton)(({
   theme,
   ownerState
 }) => _extends({

package/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 const classes = generateUtilityClasses('PrivateClockNumber', ['selected', 'disabled']);
-const ClockNumberRoot = styled('span', {
-  skipSx: true
-})(({
+const ClockNumberRoot = styled('span')(({
   theme,
   ownerState
 }) => _extends({
@@ -23,6 +21,7 @@ const ClockNumberRoot = styled('span', {
   alignItems: 'center',
   borderRadius: '50%',
   color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily,
   '&:focused': {
     backgroundColor: theme.palette.background.paper
   },

package/ClockPicker/ClockPointer.js

@@ -5,9 +5,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";
-const ClockPointerRoot = styled('div', {
-  skipSx: true
-})(({
+const ClockPointerRoot = styled('div')(({
   theme,
   ownerState
 }) => _extends({
@@ -20,9 +18,7 @@ const ClockPointerRoot = styled('div', {
 }, ownerState.toAnimateTransform && {
   transition: theme.transitions.create(['transform', 'height'])
 }));
-const ClockPointerThumb = styled('div', {
-  skipSx: true
-})(({
+const ClockPointerThumb = styled('div')(({
   theme,
   ownerState
 }) => _extends({

package/DatePicker/DatePicker.js

@@ -44,7 +44,9 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker(inProps, re
   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/DatePicker/DatePickerToolbar.js

@@ -10,17 +10,13 @@ import { useUtils } from '../internal/pickers/hooks/useUtils';
 import { isYearAndMonthViews, isYearOnlyView } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
 const classes = generateUtilityClasses('PrivateDatePickerToolbar', ['penIcon']);
-const DatePickerToolbarRoot = styled(PickersToolbar, {
-  skipSx: true
-})({
+const DatePickerToolbarRoot = styled(PickersToolbar)({
   [`& .${classes.penIcon}`]: {
     position: 'relative',
     top: 4
   }
 });
-const DatePickerToolbarTitle = styled(Typography, {
-  skipSx: true
-})(({
+const DatePickerToolbarTitle = styled(Typography)(({
   ownerState
 }) => _extends({}, ownerState.isLandscape && {
   margin: 'auto 16px auto auto'

package/DateRangePicker/DateRangePickerInput.js

@@ -8,9 +8,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";
-const DateRangePickerInputRoot = styled('div', {
-  skipSx: true
-})(({
+const DateRangePickerInputRoot = styled('div')(({
   theme
 }) => ({
   display: 'flex',

package/DateRangePicker/DateRangePickerToolbar.js

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

package/DateRangePicker/DateRangePickerViewDesktop.js

@@ -14,30 +14,22 @@ 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";
-const DateRangePickerViewDesktopRoot = styled('div', {
-  skipSx: true
-})({
+const DateRangePickerViewDesktopRoot = styled('div')({
   display: 'flex',
   flexDirection: 'row'
 });
-const DateRangePickerViewDesktopContainer = styled('div', {
-  skipSx: true
-})(({
+const DateRangePickerViewDesktopContainer = styled('div')(({
   theme
 }) => ({
   '&:not(:last-of-type)': {
     borderRight: `2px solid ${theme.palette.divider}`
   }
 }));
-const DateRangePickerViewDesktopCalendar = styled(PickersCalendar, {
-  skipSx: true
-})({
+const DateRangePickerViewDesktopCalendar = styled(PickersCalendar)({
   minWidth: 312,
   minHeight: 288
 });
-const DateRangePickerViewDesktopArrowSwitcher = styled(PickersArrowSwitcher, {
-  skipSx: true
-})({
+const DateRangePickerViewDesktopArrowSwitcher = styled(PickersArrowSwitcher)({
   padding: '16px 16px 8px 16px',
   display: 'flex',
   alignItems: 'center',

package/DateTimePicker/DateTimePickerTabs.js

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

package/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";
 const classes = generateUtilityClasses('PrivateDateTimePickerToolbar', ['penIcon']);
-const DateTimePickerToolbarRoot = styled(PickersToolbar, {
-  skipSx: true
-})({
+const DateTimePickerToolbarRoot = styled(PickersToolbar)({
   paddingLeft: 16,
   paddingRight: 16,
   justifyContent: 'space-around',
@@ -28,21 +26,15 @@ const DateTimePickerToolbarRoot = styled(PickersToolbar, {
     right: 8
   }
 });
-const DateTimePickerToolbarDateContainer = styled('div', {
-  skipSx: true
-})({
+const DateTimePickerToolbarDateContainer = styled('div')({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start'
 });
-const DateTimePickerToolbarTimeContainer = styled('div', {
-  skipSx: true
-})({
+const DateTimePickerToolbarTimeContainer = styled('div')({
   display: 'flex'
 });
-const DateTimePickerToolbarSeparator = styled(PickersToolbarText, {
-  skipSx: true
-})({
+const DateTimePickerToolbarSeparator = styled(PickersToolbarText)({
   margin: '0 4px 0 2px',
   cursor: 'default'
 });

package/DesktopDatePicker/DesktopDatePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onChange", "PopperProps", "PaperProps", "ToolbarComponent", "TransitionComponent", "value"];
+const _excluded = ["onChange", "PopperProps", "PaperProps", "ToolbarComponent", "TransitionComponent", "value", "clearText", "clearable"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDatePickerDefaultizedProps } from '../DatePicker/shared';
@@ -42,7 +42,9 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
     PopperProps,
     PaperProps,
     ToolbarComponent = DatePickerToolbar,
-    TransitionComponent
+    TransitionComponent,
+    clearText,
+    clearable
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -57,6 +59,8 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
     PopperProps: PopperProps,
     PaperProps: PaperProps,
     TransitionComponent: TransitionComponent,
+    clearText: clearText,
+    clearable: clearable,
     children: /*#__PURE__*/_jsx(Picker, _extends({}, pickerProps, {
       autoFocus: true,
       toolbarTitle: props.label || props.toolbarTitle,
@@ -100,6 +104,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/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -141,6 +141,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/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -110,6 +110,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/DesktopTimePicker/DesktopTimePicker.js

@@ -99,6 +99,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/LoadingButton/LoadingButton.js

@@ -236,6 +236,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/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";
 const classes = generateUtilityClasses('PrivatePickersMonth', ['root', 'selected']);
-const PickersMonthRoot = styled(Typography, {
-  skipSx: true
-})(({
+const PickersMonthRoot = styled(Typography)(({
   theme
 }) => _extends({
   flex: '1 0 33.33%',

package/TimePicker/TimePickerToolbar.js

@@ -34,23 +34,17 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getTimePickerToolbarUtilityClass, classes);
 };
 
-const TimePickerToolbarRoot = styled(PickersToolbar, {
-  skipSx: true
-})({
+const TimePickerToolbarRoot = styled(PickersToolbar)({
   [`& .${timePickerToolbarClasses.penIconLandscape}`]: {
     marginTop: 'auto'
   }
 });
-const TimePickerToolbarSeparator = styled(PickersToolbarText, {
-  skipSx: true
-})({
+const TimePickerToolbarSeparator = styled(PickersToolbarText)({
   outline: 0,
   margin: '0 4px 0 2px',
   cursor: 'default'
 });
-const TimePickerToolbarHourMinuteLabel = styled('div', {
-  skipSx: true
-})(({
+const TimePickerToolbarHourMinuteLabel = styled('div')(({
   theme,
   ownerState
 }) => _extends({
@@ -62,9 +56,7 @@ const TimePickerToolbarHourMinuteLabel = styled('div', {
 }, theme.direction === 'rtl' && {
   flexDirection: 'row-reverse'
 }));
-const TimePickerToolbarAmPmSelection = styled('div', {
-  skipSx: true
-})(({
+const TimePickerToolbarAmPmSelection = styled('div')(({
   ownerState
 }) => _extends({
   display: 'flex',

package/TreeItem/TreeItem.js

@@ -102,7 +102,7 @@ const StyledTreeItemContent = styled(TreeItemContent, {
   },
   [`& .${treeItemClasses.label}`]: _extends({
     width: '100%',
-    // fixes overflow - see https://github.com/mui-org/material-ui/issues/27372
+    // fixes overflow - see https://github.com/mui/material-ui/issues/27372
     minWidth: 0,
     paddingLeft: 4,
     position: 'relative'

package/TreeView/TreeView.js

@@ -688,6 +688,10 @@ const TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
           if (isExpandable(focusedNodeId)) {
             toggleExpansion(event);
             flag = true;
+          } else if (multiSelect) {
+            flag = selectNode(event, focusedNodeId, true);
+          } else {
+            flag = selectNode(event, focusedNodeId);
           }
         }
 

package/YearPicker/PickersYear.js

@@ -25,9 +25,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getPickersYearUtilityClass, classes);
 };
 
-const PickersYearRoot = styled('div', {
-  skipSx: true
-})(({
+const PickersYearRoot = styled('div')(({
   ownerState
 }) => _extends({
   flexBasis: '33.3%',
@@ -37,9 +35,7 @@ const PickersYearRoot = styled('div', {
 }, (ownerState == null ? void 0 : ownerState.wrapperVariant) === 'desktop' && {
   flexBasis: '25%'
 }));
-const PickersYearButton = styled('button', {
-  skipSx: true
-})(({
+const PickersYearButton = styled('button')(({
   theme
 }) => _extends({
   color: 'unset',

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.0-alpha.65
+/** @license MUI v5.0.0-alpha.69
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/internal/pickers/Picker/Picker.js

@@ -15,9 +15,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 export const MobileKeyboardInputView = styled('div')({
   padding: '16px 24px'
 });
-const PickerRoot = styled('div', {
-  skipSx: true
-})(({
+const PickerRoot = styled('div')(({
   ownerState
 }) => _extends({
   display: 'flex',

package/internal/pickers/PickersArrowSwitcher.js

@@ -12,16 +12,12 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const PickersArrowSwitcherRoot = styled('div')({
   display: 'flex'
 });
-const PickersArrowSwitcherSpacer = styled('div', {
-  skipSx: true
-})(({
+const PickersArrowSwitcherSpacer = styled('div')(({
   theme
 }) => ({
   width: theme.spacing(3)
 }));
-const PickersArrowSwitcherButton = styled(IconButton, {
-  skipSx: true
-})(({
+const PickersArrowSwitcherButton = styled(IconButton)(({
   ownerState
 }) => _extends({}, ownerState.hidden && {
   visibility: 'hidden'

package/internal/pickers/PickersModalDialog.js

@@ -8,9 +8,7 @@ import { styled } from '@mui/material/styles';
 import { DIALOG_WIDTH } from './constants/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const PickersModalDialogRoot = styled(Dialog, {
-  skipSx: true
-})({
+const PickersModalDialogRoot = styled(Dialog)({
   [`& .${dialogClasses.container}`]: {
     outline: 0
   },
@@ -19,20 +17,16 @@ const PickersModalDialogRoot = styled(Dialog, {
     minWidth: DIALOG_WIDTH
   }
 });
-const PickersModalDialogContent = styled(DialogContent, {
-  skipSx: true
-})({
+const PickersModalDialogContent = styled(DialogContent)({
   '&:first-of-type': {
     padding: 0
   }
 });
-const PickersModalDialogActions = styled(DialogActions, {
-  skipSx: true
-})(({
+const PickersModalDialogActions = styled(DialogActions)(({
   ownerState
 }) => _extends({}, (ownerState.clearable || ownerState.showTodayButton) && {
   // set justifyContent to default value to fix IE11 layout bug
-  // see https://github.com/mui-org/material-ui-pickers/pull/267
+  // see https://github.com/mui/material-ui-pickers/pull/267
   justifyContent: 'flex-start',
   '& > *:first-of-type': {
     marginRight: 'auto'

package/internal/pickers/PickersPopper.d.ts

@@ -4,6 +4,16 @@ import { PopperProps as MuiPopperProps } from '@mui/material/Popper';
 import { TrapFocusProps as MuiTrapFocusProps } from '@mui/material/Unstable_TrapFocus';
 import { TransitionProps as MuiTransitionProps } from '@mui/material/transitions';
 export interface ExportedPickerPaperProps {
+    /**
+     * If `true`, it shows the clear action in the picker dialog.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Clear text message.
+     * @default 'Clear'
+     */
+    clearText?: React.ReactNode;
     /**
      * Paper props passed down to [Paper](https://mui.com/api/paper/) component.
      */
@@ -28,6 +38,7 @@ export interface PickerPopperProps extends ExportedPickerPopperProps, ExportedPi
     children?: React.ReactNode;
     onClose: () => void;
     onBlur?: () => void;
+    onClear?: () => void;
 }
 declare const PickersPopper: (props: PickerPopperProps) => JSX.Element;
 export default PickersPopper;

package/internal/pickers/PickersPopper.js

@@ -8,17 +8,16 @@ import Popper from '@mui/material/Popper';
 import TrapFocus from '@mui/material/Unstable_TrapFocus';
 import { useForkRef, useEventCallback, ownerDocument } from '@mui/material/utils';
 import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import DialogActions from '@mui/material/DialogActions';
 import { jsx as _jsx } from "react/jsx-runtime";
-const PickersPopperRoot = styled(Popper, {
-  skipSx: true
-})(({
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const PickersPopperRoot = styled(Popper)(({
   theme
 }) => ({
   zIndex: theme.zIndex.modal
 }));
-const PickersPopperPaper = styled(Paper, {
-  skipSx: true
-})(({
+const PickersPopperPaper = styled(Paper)(({
   ownerState
 }) => _extends({
   transformOrigin: 'top center',
@@ -26,6 +25,16 @@ const PickersPopperPaper = styled(Paper, {
 }, ownerState.placement === 'top' && {
   transformOrigin: 'bottom center'
 }));
+const PickersPopperAction = styled(DialogActions)(({
+  ownerState
+}) => _extends({}, ownerState.clearable ? {
+  justifyContent: 'flex-start',
+  '& > *:first-of-type': {
+    marginRight: 'auto'
+  }
+} : {
+  padding: 0
+}));
 
 function clickedRootScrollbar(event, doc) {
   return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;
@@ -149,11 +158,16 @@ function useClickAwayListener(active, onClickAway) {
 }
 
 const PickersPopper = props => {
+  var _Button;
+
   const {
     anchorEl,
     children,
     containerRef = null,
     onClose,
+    onClear,
+    clearable = false,
+    clearText = 'Clear',
     open,
     PopperProps,
     role,
@@ -215,7 +229,7 @@ const PickersPopper = props => {
       isEnabled: () => true
     }, TrapFocusProps, {
       children: /*#__PURE__*/_jsx(TransitionComponent, _extends({}, TransitionProps, {
-        children: /*#__PURE__*/_jsx(PickersPopperPaper, _extends({
+        children: /*#__PURE__*/_jsxs(PickersPopperPaper, _extends({
           tabIndex: -1,
           elevation: 8,
           ref: handlePaperRef,
@@ -237,7 +251,13 @@ const PickersPopper = props => {
             placement
           })
         }, otherPaperProps, {
-          children: children
+          children: [children, /*#__PURE__*/_jsx(PickersPopperAction, {
+            ownerState: ownerState,
+            children: clearable && (_Button || (_Button = /*#__PURE__*/_jsx(Button, {
+              onClick: onClear,
+              children: clearText
+            })))
+          })]
         }))
       }))
     }))