@mui/x-date-pickers 6.10.2 → 6.11.1

package/legacy/DateCalendar/DateCalendar.js

@@ -4,6 +4,7 @@ var _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "referenc
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { useSlotProps } from '@mui/base/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useCalendarState } from './useCalendarState';
@@ -13,10 +14,10 @@ import { DayCalendar } from './DayCalendar';
 import { MonthCalendar } from '../MonthCalendar';
 import { YearCalendar } from '../YearCalendar';
 import { useViews } from '../internals/hooks/useViews';
-import { PickersCalendarHeader } from './PickersCalendarHeader';
+import { PickersCalendarHeader } from '../PickersCalendarHeader';
 import { findClosestEnabledDate, applyDefaultDate, mergeDateAndTime } from '../internals/utils/date-utils';
 import { PickerViewRoot } from '../internals/components/PickerViewRoot';
-import { defaultReduceAnimations } from '../internals/utils/defaultReduceAnimations';
+import { useDefaultReduceAnimations } from '../internals/hooks/useDefaultReduceAnimations';
 import { getDateCalendarUtilityClass } from './dateCalendarClasses';
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
@@ -31,25 +32,26 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getDateCalendarUtilityClass, classes);
 };
 function useDateCalendarDefaultizedProps(props, name) {
+  var _themeProps$loading, _themeProps$disablePa, _themeProps$disableFu, _themeProps$openTo, _themeProps$views, _themeProps$reduceAni, _themeProps$renderLoa;
   var utils = useUtils();
   var defaultDates = useDefaultDates();
+  var defaultReduceAnimations = useDefaultReduceAnimations();
   var themeProps = useThemeProps({
     props: props,
     name: name
   });
-  return _extends({
-    loading: false,
-    disablePast: false,
-    disableFuture: false,
-    openTo: 'day',
-    views: ['year', 'day'],
-    reduceAnimations: defaultReduceAnimations,
-    renderLoading: function renderLoading() {
+  return _extends({}, themeProps, {
+    loading: (_themeProps$loading = themeProps.loading) != null ? _themeProps$loading : false,
+    disablePast: (_themeProps$disablePa = themeProps.disablePast) != null ? _themeProps$disablePa : false,
+    disableFuture: (_themeProps$disableFu = themeProps.disableFuture) != null ? _themeProps$disableFu : false,
+    openTo: (_themeProps$openTo = themeProps.openTo) != null ? _themeProps$openTo : 'day',
+    views: (_themeProps$views = themeProps.views) != null ? _themeProps$views : ['year', 'day'],
+    reduceAnimations: (_themeProps$reduceAni = themeProps.reduceAnimations) != null ? _themeProps$reduceAni : defaultReduceAnimations,
+    renderLoading: (_themeProps$renderLoa = themeProps.renderLoading) != null ? _themeProps$renderLoa : function () {
       return /*#__PURE__*/_jsx("span", {
         children: "..."
       });
-    }
-  }, themeProps, {
+    },
     minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate)
   });
@@ -82,6 +84,7 @@ var DateCalendarViewTransitionContainer = styled(PickersFadeTransitionGroup, {
  * - [DateCalendar API](https://mui.com/x/api/date-pickers/date-calendar/)
  */
 export var DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps, ref) {
+  var _ref, _slots$calendarHeader, _slotProps$calendarHe;
   var utils = useUtils();
   var id = useId();
   var props = useDateCalendarDefaultizedProps(inProps, 'MuiDateCalendar');
@@ -172,6 +175,40 @@ export var DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(in
     handleChangeMonth = _useCalendarState.handleChangeMonth,
     isDateDisabled = _useCalendarState.isDateDisabled,
     onMonthSwitchingAnimationEnd = _useCalendarState.onMonthSwitchingAnimationEnd;
+
+  // When disabled, limit the view to the selected date
+  var minDateWithDisabled = disabled && value || minDate;
+  var maxDateWithDisabled = disabled && value || maxDate;
+  var gridLabelId = "".concat(id, "-grid-label");
+  var hasFocus = focusedView !== null;
+  var CalendarHeader = (_ref = (_slots$calendarHeader = slots == null ? void 0 : slots.calendarHeader) != null ? _slots$calendarHeader : components == null ? void 0 : components.CalendarHeader) != null ? _ref : PickersCalendarHeader;
+  var calendarHeaderProps = useSlotProps({
+    elementType: CalendarHeader,
+    externalSlotProps: (_slotProps$calendarHe = slotProps == null ? void 0 : slotProps.calendarHeader) != null ? _slotProps$calendarHe : componentsProps == null ? void 0 : componentsProps.calendarHeader,
+    additionalProps: {
+      views: views,
+      view: view,
+      currentMonth: calendarState.currentMonth,
+      onViewChange: setView,
+      onMonthChange: function onMonthChange(newMonth, direction) {
+        return handleChangeMonth({
+          newMonth: newMonth,
+          direction: direction
+        });
+      },
+      minDate: minDateWithDisabled,
+      maxDate: maxDateWithDisabled,
+      disabled: disabled,
+      disablePast: disablePast,
+      disableFuture: disableFuture,
+      reduceAnimations: reduceAnimations,
+      timezone: timezone,
+      labelId: gridLabelId,
+      slots: slots,
+      slotProps: slotProps
+    },
+    ownerState: props
+  });
   var handleDateMonthChange = useEventCallback(function (newDate) {
     var startOfMonth = utils.startOfMonth(newDate);
     var endOfMonth = utils.endOfMonth(newDate);
@@ -237,18 +274,12 @@ export var DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(in
     maxDate: maxDate,
     minDate: minDate
   };
-
-  // When disabled, limit the view to the selected date
-  var minDateWithDisabled = disabled && value || minDate;
-  var maxDateWithDisabled = disabled && value || maxDate;
   var commonViewProps = {
     disableHighlightToday: disableHighlightToday,
     readOnly: readOnly,
     disabled: disabled,
     timezone: timezone
   };
-  var gridLabelId = "".concat(id, "-grid-label");
-  var hasFocus = focusedView !== null;
   var prevOpenViewRef = React.useRef(view);
   React.useEffect(function () {
     // If the view change and the focus was on the previous view
@@ -269,28 +300,7 @@ export var DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(in
     className: clsx(classes.root, className),
     ownerState: ownerState
   }, other, {
-    children: [/*#__PURE__*/_jsx(PickersCalendarHeader, {
-      views: views,
-      view: view,
-      currentMonth: calendarState.currentMonth,
-      onViewChange: setView,
-      onMonthChange: function onMonthChange(newMonth, direction) {
-        return handleChangeMonth({
-          newMonth: newMonth,
-          direction: direction
-        });
-      },
-      minDate: minDateWithDisabled,
-      maxDate: maxDateWithDisabled,
-      disabled: disabled,
-      disablePast: disablePast,
-      disableFuture: disableFuture,
-      reduceAnimations: reduceAnimations,
-      labelId: gridLabelId,
-      slots: slots,
-      slotProps: slotProps,
-      timezone: timezone
-    }), /*#__PURE__*/_jsx(DateCalendarViewTransitionContainer, {
+    children: [/*#__PURE__*/_jsx(CalendarHeader, _extends({}, calendarHeaderProps)), /*#__PURE__*/_jsx(DateCalendarViewTransitionContainer, {
       reduceAnimations: reduceAnimations,
       className: classes.viewTransitionContainer,
       transKey: view,

package/legacy/DateCalendar/index.js

@@ -1,6 +1,7 @@
 export { DateCalendar } from './DateCalendar';
 export { getDateCalendarUtilityClass, dateCalendarClasses } from './dateCalendarClasses';
 export { dayPickerClasses } from './dayCalendarClasses';
-export { pickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
 export { pickersFadeTransitionGroupClasses } from './pickersFadeTransitionGroupClasses';
-export { pickersSlideTransitionClasses } from './pickersSlideTransitionClasses';
+export { pickersSlideTransitionClasses } from './pickersSlideTransitionClasses';
+// TODO v7: Remove and export the `PickersCalendarHeader` folder from the root instead.
+export * from '../PickersCalendarHeader';

package/legacy/DateField/DateField.js

@@ -35,8 +35,8 @@ var DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref) {
     textFieldProps = _objectWithoutProperties(_useSlotProps, _excluded2);
 
   // TODO: Remove when mui/material-ui#35088 will be merged
-  textFieldProps.inputProps = _extends({}, textFieldProps.inputProps, inputProps);
-  textFieldProps.InputProps = _extends({}, textFieldProps.InputProps, InputProps);
+  textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
+  textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
   var _useDateField = useDateField({
       props: textFieldProps,
       inputRef: externalInputRef
@@ -79,6 +79,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @default 'primary'
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  component: PropTypes.elementType,
   /**
    * Overridable components.
    * @default {}

package/legacy/DateTimeField/DateTimeField.js

@@ -35,8 +35,8 @@ var DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inProps
     textFieldProps = _objectWithoutProperties(_useSlotProps, _excluded2);
 
   // TODO: Remove when mui/material-ui#35088 will be merged
-  textFieldProps.inputProps = _extends({}, textFieldProps.inputProps, inputProps);
-  textFieldProps.InputProps = _extends({}, textFieldProps.InputProps, InputProps);
+  textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
+  textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
   var _useDateTimeField = useDateTimeField({
       props: textFieldProps,
       inputRef: externalInputRef
@@ -84,6 +84,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @default 'primary'
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  component: PropTypes.elementType,
   /**
    * Overridable components.
    * @default {}

package/legacy/DateTimePicker/DateTimePickerToolbar.js

@@ -13,6 +13,7 @@ import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { dateTimePickerToolbarClasses, getDateTimePickerToolbarUtilityClass } from './dateTimePickerToolbarClasses';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { MULTI_SECTION_CLOCK_SECTION_WIDTH } from '../internals/constants/dimensions';
+import { formatMeridiem } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -283,7 +284,7 @@ function DateTimePickerToolbar(inProps) {
           variant: "subtitle2",
           selected: meridiemMode === 'am',
           typographyClassName: classes.ampmLabel,
-          value: utils.getMeridiemText('am'),
+          value: formatMeridiem(utils, 'am'),
           onClick: readOnly ? undefined : function () {
             return handleMeridiemChange('am');
           },
@@ -292,7 +293,7 @@ function DateTimePickerToolbar(inProps) {
           variant: "subtitle2",
           selected: meridiemMode === 'pm',
           typographyClassName: classes.ampmLabel,
-          value: utils.getMeridiemText('pm'),
+          value: formatMeridiem(utils, 'pm'),
           onClick: readOnly ? undefined : function () {
             return handleMeridiemChange('pm');
           },
@@ -304,7 +305,7 @@ function DateTimePickerToolbar(inProps) {
           return onViewChange('meridiem');
         },
         selected: view === 'meridiem',
-        value: value && meridiemMode ? utils.getMeridiemText(meridiemMode) : '--',
+        value: value && meridiemMode ? formatMeridiem(utils, meridiemMode) : '--',
         width: MULTI_SECTION_CLOCK_SECTION_WIDTH
       })]
     })]

package/legacy/DesktopDatePicker/DesktopDatePicker.js

@@ -12,7 +12,7 @@ import { extractValidationProps } from '../internals/utils/validation/extractVal
 import { renderDateViewCalendar } from '../dateViewRenderers';
 import { resolveDateFormat } from '../internals/utils/date-utils';
 var DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePicker(inProps, ref) {
-  var _defaultizedProps$yea, _defaultizedProps$slo2;
+  var _defaultizedProps$yea, _defaultizedProps$slo2, _props$localeText$ope, _props$localeText;
   var localeText = useLocaleText();
   var utils = useUtils();
 
@@ -49,7 +49,7 @@ var DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePicker
       props: props,
       valueManager: singleItemValueManager,
       valueType: 'date',
-      getOpenDialogAriaText: localeText.openDatePickerDialogue,
+      getOpenDialogAriaText: (_props$localeText$ope = (_props$localeText = props.localeText) == null ? void 0 : _props$localeText.openDatePickerDialogue) != null ? _props$localeText$ope : localeText.openDatePickerDialogue,
       validator: validateDate
     }),
     renderPicker = _useDesktopPicker.renderPicker;

package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -15,7 +15,7 @@ import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { resolveDateTimeFormat } from '../internals/utils/date-time-utils';
 var DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
-  var _defaultizedProps$amp, _defaultizedProps$yea, _defaultizedProps$slo2, _defaultizedProps$slo3, _defaultizedProps$slo4;
+  var _defaultizedProps$amp, _defaultizedProps$yea, _defaultizedProps$slo2, _defaultizedProps$slo3, _defaultizedProps$slo4, _props$localeText$ope, _props$localeText;
   var localeText = useLocaleText();
   var utils = useUtils();
 
@@ -86,7 +86,7 @@ var DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTi
       props: props,
       valueManager: singleItemValueManager,
       valueType: 'date-time',
-      getOpenDialogAriaText: localeText.openDatePickerDialogue,
+      getOpenDialogAriaText: (_props$localeText$ope = (_props$localeText = props.localeText) == null ? void 0 : _props$localeText.openDatePickerDialogue) != null ? _props$localeText$ope : localeText.openDatePickerDialogue,
       validator: validateDateTime
     }),
     renderPicker = _useDesktopPicker.renderPicker;

package/legacy/DesktopTimePicker/DesktopTimePicker.js

@@ -14,7 +14,7 @@ import { extractValidationProps } from '../internals/utils/validation/extractVal
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '../timeViewRenderers';
 import { resolveTimeFormat } from '../internals/utils/time-utils';
 var DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
-  var _defaultizedProps$thr, _defaultizedProps$amp, _viewRenderers$hours, _defaultizedProps$slo2, _defaultizedProps$slo3;
+  var _defaultizedProps$thr, _defaultizedProps$amp, _viewRenderers$hours, _defaultizedProps$slo2, _defaultizedProps$slo3, _props$localeText$ope, _props$localeText;
   var localeText = useLocaleText();
   var utils = useUtils();
 
@@ -73,7 +73,7 @@ var DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker
       props: props,
       valueManager: singleItemValueManager,
       valueType: 'time',
-      getOpenDialogAriaText: localeText.openTimePickerDialogue,
+      getOpenDialogAriaText: (_props$localeText$ope = (_props$localeText = props.localeText) == null ? void 0 : _props$localeText.openTimePickerDialogue) != null ? _props$localeText$ope : localeText.openTimePickerDialogue,
       validator: validateTime
     }),
     renderPicker = _useDesktopPicker.renderPicker;

package/legacy/MobileDatePicker/MobileDatePicker.js

@@ -11,7 +11,7 @@ import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { renderDateViewCalendar } from '../dateViewRenderers';
 import { resolveDateFormat } from '../internals/utils/date-utils';
 var MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker(inProps, ref) {
-  var _defaultizedProps$slo2;
+  var _defaultizedProps$slo2, _props$localeText$ope, _props$localeText;
   var localeText = useLocaleText();
   var utils = useUtils();
 
@@ -46,7 +46,7 @@ var MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker(i
       props: props,
       valueManager: singleItemValueManager,
       valueType: 'date',
-      getOpenDialogAriaText: localeText.openDatePickerDialogue,
+      getOpenDialogAriaText: (_props$localeText$ope = (_props$localeText = props.localeText) == null ? void 0 : _props$localeText.openDatePickerDialogue) != null ? _props$localeText$ope : localeText.openDatePickerDialogue,
       validator: validateDate
     }),
     renderPicker = _useMobilePicker.renderPicker;

package/legacy/MobileDateTimePicker/MobileDateTimePicker.js

@@ -13,7 +13,7 @@ import { renderDateViewCalendar } from '../dateViewRenderers';
 import { renderTimeViewClock } from '../timeViewRenderers';
 import { resolveDateTimeFormat } from '../internals/utils/date-time-utils';
 var MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimePicker(inProps, ref) {
-  var _defaultizedProps$amp, _defaultizedProps$slo2, _defaultizedProps$slo3;
+  var _defaultizedProps$amp, _defaultizedProps$slo2, _defaultizedProps$slo3, _props$localeText$ope, _props$localeText;
   var localeText = useLocaleText();
   var utils = useUtils();
 
@@ -57,7 +57,7 @@ var MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTime
       props: props,
       valueManager: singleItemValueManager,
       valueType: 'date-time',
-      getOpenDialogAriaText: localeText.openDatePickerDialogue,
+      getOpenDialogAriaText: (_props$localeText$ope = (_props$localeText = props.localeText) == null ? void 0 : _props$localeText.openDatePickerDialogue) != null ? _props$localeText$ope : localeText.openDatePickerDialogue,
       validator: validateDateTime
     }),
     renderPicker = _useMobilePicker.renderPicker;

package/legacy/MobileTimePicker/MobileTimePicker.js

@@ -12,7 +12,7 @@ import { extractValidationProps } from '../internals/utils/validation/extractVal
 import { renderTimeViewClock } from '../timeViewRenderers';
 import { resolveTimeFormat } from '../internals/utils/time-utils';
 var MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(inProps, ref) {
-  var _defaultizedProps$amp, _defaultizedProps$slo2;
+  var _defaultizedProps$amp, _defaultizedProps$slo2, _props$localeText$ope, _props$localeText;
   var localeText = useLocaleText();
   var utils = useUtils();
 
@@ -50,7 +50,7 @@ var MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(i
       props: props,
       valueManager: singleItemValueManager,
       valueType: 'time',
-      getOpenDialogAriaText: localeText.openTimePickerDialogue,
+      getOpenDialogAriaText: (_props$localeText$ope = (_props$localeText = props.localeText) == null ? void 0 : _props$localeText.openTimePickerDialogue) != null ? _props$localeText$ope : localeText.openTimePickerDialogue,
       validator: validateTime
     }),
     renderPicker = _useMobilePicker.renderPicker;

package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -21,6 +21,7 @@ import { getHourSectionOptions, getTimeSectionOptions } from './MultiSectionDigi
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { useClockReferenceDate } from '../internals/hooks/useClockReferenceDate';
+import { formatMeridiem } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
@@ -287,8 +288,8 @@ export var MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function Mul
         }
       case 'meridiem':
         {
-          var amLabel = utils.getMeridiemText('am');
-          var pmLabel = utils.getMeridiemText('pm');
+          var amLabel = formatMeridiem(utils, 'am');
+          var pmLabel = formatMeridiem(utils, 'pm');
           return {
             onChange: handleMeridiemChange,
             items: [{

package/legacy/{DateCalendar → PickersCalendarHeader}/PickersCalendarHeader.js

@@ -1,15 +1,18 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["ownerState"];
+var _excluded = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "timezone"],
+  _excluded2 = ["ownerState"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import Fade from '@mui/material/Fade';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import IconButton from '@mui/material/IconButton';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
-import { PickersFadeTransitionGroup } from './PickersFadeTransitionGroup';
+import { PickersFadeTransitionGroup } from '../DateCalendar/PickersFadeTransitionGroup';
 import { ArrowDropDownIcon } from '../icons';
 import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher';
 import { usePreviousMonthDisabled, useNextMonthDisabled } from '../internals/hooks/date-helpers-hooks';
@@ -101,11 +104,7 @@ var PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDownIcon, {
     transform: 'rotate(0deg)'
   };
 });
-
-/**
- * @ignore - do not document.
- */
-export function PickersCalendarHeader(inProps) {
+var PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCalendarHeader(inProps, ref) {
   var _slots$switchViewButt, _slots$switchViewIcon;
   var localeText = useLocaleText();
   var utils = useUtils();
@@ -127,7 +126,9 @@ export function PickersCalendarHeader(inProps) {
     reduceAnimations = props.reduceAnimations,
     views = props.views,
     labelId = props.labelId,
-    timezone = props.timezone;
+    className = props.className,
+    timezone = props.timezone,
+    other = _objectWithoutProperties(props, _excluded);
   var ownerState = props;
   var classes = useUtilityClasses(props);
   var SwitchViewButton = (_slots$switchViewButt = slots == null ? void 0 : slots.switchViewButton) != null ? _slots$switchViewButt : PickersCalendarHeaderSwitchViewButton;
@@ -150,7 +151,7 @@ export function PickersCalendarHeader(inProps) {
       className: classes.switchViewIcon
     }),
     switchViewIconOwnerState = _useSlotProps.ownerState,
-    switchViewIconProps = _objectWithoutProperties(_useSlotProps, _excluded);
+    switchViewIconProps = _objectWithoutProperties(_useSlotProps, _excluded2);
   var selectNextMonth = function selectNextMonth() {
     return onMonthChange(utils.addMonths(month, 1), 'left');
   };
@@ -186,9 +187,10 @@ export function PickersCalendarHeader(inProps) {
   if (views.length === 1 && views[0] === 'year') {
     return null;
   }
-  return /*#__PURE__*/_jsxs(PickersCalendarHeaderRoot, {
+  return /*#__PURE__*/_jsxs(PickersCalendarHeaderRoot, _extends({}, other, {
     ownerState: ownerState,
-    className: classes.root,
+    className: clsx(className, classes.root),
+    ref: ref,
     children: [/*#__PURE__*/_jsxs(PickersCalendarHeaderLabelContainer, {
       role: "presentation",
       onClick: handleToggleView,
@@ -222,5 +224,47 @@ export function PickersCalendarHeader(inProps) {
         nextLabel: localeText.nextMonth
       })
     })]
-  });
-}
+  }));
+});
+process.env.NODE_ENV !== "production" ? PickersCalendarHeader.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * className applied to the root element.
+   */
+  className: PropTypes.string,
+  currentMonth: PropTypes.any.isRequired,
+  disabled: PropTypes.bool,
+  disableFuture: PropTypes.bool,
+  disablePast: PropTypes.bool,
+  labelId: PropTypes.string,
+  maxDate: PropTypes.any.isRequired,
+  minDate: PropTypes.any.isRequired,
+  onMonthChange: PropTypes.func.isRequired,
+  onViewChange: PropTypes.func,
+  reduceAnimations: PropTypes.bool.isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
+  /**
+   * 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]),
+  timezone: PropTypes.string.isRequired,
+  view: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
+  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired).isRequired
+} : void 0;
+export { PickersCalendarHeader };

package/legacy/PickersCalendarHeader/index.js

@@ -0,0 +1,2 @@
+export { pickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
+export { PickersCalendarHeader } from './PickersCalendarHeader';

package/legacy/PickersDay/PickersDay.js

@@ -239,6 +239,7 @@ process.env.NODE_ENV !== "production" ? PickersDayRaw.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
+  component: PropTypes.elementType,
   /**
    * The date to show.
    */

package/legacy/PickersShortcuts/PickersShortcuts.js

@@ -59,6 +59,7 @@ process.env.NODE_ENV !== "production" ? PickersShortcuts.propTypes = {
    */
   changeImportance: PropTypes.oneOf(['accept', 'set']),
   className: PropTypes.string,
+  component: PropTypes.elementType,
   /**
    * If `true`, compact vertical padding designed for keyboard and mouse input is used for
    * the list and list items.

package/legacy/TimeField/TimeField.js

@@ -35,8 +35,8 @@ var TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref) {
     textFieldProps = _objectWithoutProperties(_useSlotProps, _excluded2);
 
   // TODO: Remove when mui/material-ui#35088 will be merged
-  textFieldProps.inputProps = _extends({}, textFieldProps.inputProps, inputProps);
-  textFieldProps.InputProps = _extends({}, textFieldProps.InputProps, InputProps);
+  textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
+  textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
   var _useTimeField = useTimeField({
       props: textFieldProps,
       inputRef: externalInputRef
@@ -84,6 +84,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @default 'primary'
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  component: PropTypes.elementType,
   /**
    * Overridable components.
    * @default {}

package/legacy/TimePicker/TimePickerToolbar.js

@@ -13,6 +13,7 @@ import { arrayIncludes } from '../internals/utils/utils';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { getTimePickerToolbarUtilityClass, timePickerToolbarClasses } from './timePickerToolbarClasses';
+import { formatMeridiem } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -185,7 +186,7 @@ function TimePickerToolbar(inProps) {
         variant: "subtitle2",
         selected: meridiemMode === 'am',
         typographyClassName: classes.ampmLabel,
-        value: utils.getMeridiemText('am'),
+        value: formatMeridiem(utils, 'am'),
         onClick: readOnly ? undefined : function () {
           return handleMeridiemChange('am');
         },
@@ -195,7 +196,7 @@ function TimePickerToolbar(inProps) {
         variant: "subtitle2",
         selected: meridiemMode === 'pm',
         typographyClassName: classes.ampmLabel,
-        value: utils.getMeridiemText('pm'),
+        value: formatMeridiem(utils, 'pm'),
         onClick: readOnly ? undefined : function () {
           return handleMeridiemChange('pm');
         },

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.10.2
+ * @mui/x-date-pickers v6.11.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internals/hooks/useDefaultReduceAnimations.js

@@ -0,0 +1,9 @@
+import useMediaQuery from '@mui/material/useMediaQuery';
+var PREFERS_REDUCED_MOTION = '@media (prefers-reduced-motion: reduce)';
+export var defaultReduceAnimations = typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent);
+export var useDefaultReduceAnimations = function useDefaultReduceAnimations() {
+  var prefersReduced = useMediaQuery(PREFERS_REDUCED_MOTION, {
+    defaultMatches: false
+  });
+  return prefersReduced || defaultReduceAnimations;
+};

package/legacy/internals/hooks/useField/useField.js

@@ -162,13 +162,18 @@ export var useField = function useField(params) {
     if (readOnly) {
       return;
     }
-    var valueStr = event.target.value;
+    var targetValue = event.target.value;
+    var eventData = event.nativeEvent.data;
+    // Calling `.fill(04/11/2022)` in playwright will trigger a change event with the requested content to insert in `event.nativeEvent.data`
+    // usual changes have only the currently typed character in the `event.nativeEvent.data`
+    var shouldUseEventData = eventData && eventData.length > 1;
+    var valueStr = shouldUseEventData ? eventData : targetValue;
     var cleanValueStr = cleanString(valueStr);
 
-    // If no section is selected, we just try to parse the new value
+    // If no section is selected or eventData should be used, we just try to parse the new value
     // This line is mostly triggered by imperative code / application tests.
-    if (selectedSectionIndexes == null) {
-      updateValueFromValueStr(cleanValueStr);
+    if (selectedSectionIndexes == null || shouldUseEventData) {
+      updateValueFromValueStr(shouldUseEventData ? eventData : cleanValueStr);
       return;
     }
     var keyPressed;
@@ -376,7 +381,7 @@ export var useField = function useField(params) {
     if (state.sections[selectedSectionIndexes.startIndex].contentType === 'letter') {
       return 'text';
     }
-    return 'tel';
+    return 'numeric';
   }, [selectedSectionIndexes, state.sections]);
   var inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document);
   var shouldShowPlaceholder = !inputHasFocus && valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);