@mui/x-date-pickers-pro 6.0.0-alpha.11 → 6.0.0-alpha.13

package/legacy/internal/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -13,7 +13,6 @@ var releaseInfo = getReleaseInfo();
 export var useMobileRangePicker = function useMobileRangePicker(_ref) {
   var props = _ref.props,
     valueManager = _ref.valueManager,
-    viewLookup = _ref.viewLookup,
     validator = _ref.validator;
   useLicenseVerifier('x-date-pickers-pro', releaseInfo);
   var components = props.components,
@@ -34,8 +33,8 @@ export var useMobileRangePicker = function useMobileRangePicker(_ref) {
       props: props,
       valueManager: valueManager,
       wrapperVariant: 'mobile',
-      viewLookup: viewLookup,
       validator: validator,
+      autoFocusView: true,
       additionalViewProps: {
         rangePosition: rangePosition,
         onRangePositionChange: setRangePosition
@@ -53,6 +52,7 @@ export var useMobileRangePicker = function useMobileRangePicker(_ref) {
     readOnly: readOnly,
     disabled: disabled,
     disableOpenPicker: disableOpenPicker,
+    localeText: localeText,
     rangePosition: rangePosition,
     onRangePositionChange: setRangePosition
   });
@@ -61,7 +61,7 @@ export var useMobileRangePicker = function useMobileRangePicker(_ref) {
     elementType: Field,
     externalSlotProps: componentsProps.field,
     additionalProps: _extends({}, pickerFieldProps, {
-      readOnly: readOnly,
+      readOnly: readOnly != null ? readOnly : true,
       disabled: disabled,
       className: className,
       format: format,
@@ -79,7 +79,7 @@ export var useMobileRangePicker = function useMobileRangePicker(_ref) {
       var inputPropsPassedByField = resolveComponentProps((_fieldProps$component = fieldProps.componentsProps) == null ? void 0 : _fieldProps$component.input, ownerState);
       var inputPropsPassedByPicker = ownerState.position === 'start' ? fieldSlotsProps.startInput : fieldSlotsProps.endInput;
       return _extends({}, externalInputProps, inputPropsPassedByField, inputPropsPassedByPicker, {
-        inputProps: _extends({}, externalInputProps == null ? void 0 : externalInputProps.inputProps, inputPropsPassedByField == null ? void 0 : inputPropsPassedByField.inputProps, inputPropsPassedByPicker == null ? void 0 : inputPropsPassedByPicker.inputProps)
+        inputProps: _extends({}, externalInputProps == null ? void 0 : externalInputProps.inputProps, inputPropsPassedByField == null ? void 0 : inputPropsPassedByField.inputProps)
       });
     },
     root: function root(ownerState) {

package/legacy/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js

@@ -18,7 +18,9 @@ export var useMultiInputDateRangeField = function useMultiInputDateRangeField(_r
   var valueProp = sharedProps.value,
     defaultValue = sharedProps.defaultValue,
     format = sharedProps.format,
-    onChange = sharedProps.onChange;
+    onChange = sharedProps.onChange,
+    disabled = sharedProps.disabled,
+    readOnly = sharedProps.readOnly;
   var firstDefaultValue = React.useRef(defaultValue);
 
   // TODO: Maybe export utility from `useField` instead of copy/pasting the logic
@@ -45,6 +47,8 @@ export var useMultiInputDateRangeField = function useMultiInputDateRangeField(_r
   var handleStartDateChange = useEventCallback(buildChangeHandler(0));
   var handleEndDateChange = useEventCallback(buildChangeHandler(1));
   var startInputProps = _extends({}, inStartInputProps, {
+    disabled: disabled,
+    readOnly: readOnly,
     format: format,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
@@ -52,6 +56,8 @@ export var useMultiInputDateRangeField = function useMultiInputDateRangeField(_r
   });
   var endInputProps = _extends({}, inEndInputProps, {
     format: format,
+    disabled: disabled,
+    readOnly: readOnly,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange

package/legacy/internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js

@@ -34,7 +34,9 @@ export var useMultiInputDateTimeRangeField = function useMultiInputDateTimeRange
   var valueProp = sharedProps.value,
     defaultValue = sharedProps.defaultValue,
     format = sharedProps.format,
-    onChange = sharedProps.onChange;
+    onChange = sharedProps.onChange,
+    disabled = sharedProps.disabled,
+    readOnly = sharedProps.readOnly;
   var firstDefaultValue = React.useRef(defaultValue);
 
   // TODO: Maybe export utility from `useField` instead of copy/pasting the logic
@@ -62,12 +64,16 @@ export var useMultiInputDateTimeRangeField = function useMultiInputDateTimeRange
   var handleEndDateChange = useEventCallback(buildChangeHandler(1));
   var startInputProps = _extends({}, inStartInputProps, {
     format: format,
+    disabled: disabled,
+    readOnly: readOnly,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange
   });
   var endInputProps = _extends({}, inEndInputProps, {
     format: format,
+    disabled: disabled,
+    readOnly: readOnly,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange

package/legacy/internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js

@@ -30,7 +30,9 @@ export var useMultiInputTimeRangeField = function useMultiInputTimeRangeField(_r
   var valueProp = sharedProps.value,
     defaultValue = sharedProps.defaultValue,
     format = sharedProps.format,
-    onChange = sharedProps.onChange;
+    onChange = sharedProps.onChange,
+    disabled = sharedProps.disabled,
+    readOnly = sharedProps.readOnly;
   var firstDefaultValue = React.useRef(defaultValue);
 
   // TODO: Maybe export utility from `useField` instead of copy/pasting the logic
@@ -58,12 +60,16 @@ export var useMultiInputTimeRangeField = function useMultiInputTimeRangeField(_r
   var handleEndDateChange = useEventCallback(buildChangeHandler(1));
   var startInputProps = _extends({}, inStartInputProps, {
     format: format,
+    disabled: disabled,
+    readOnly: readOnly,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange
   });
   var endInputProps = _extends({}, inEndInputProps, {
     format: format,
+    disabled: disabled,
+    readOnly: readOnly,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange

package/legacy/internal/hooks/useRangePickerInputProps.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { onSpaceOrEnter, useLocaleText } from '@mui/x-date-pickers/internals';
 export var useRangePickerInputProps = function useRangePickerInputProps(_ref) {
+  var _inLocaleText$start, _inLocaleText$end;
   var wrapperVariant = _ref.wrapperVariant,
     open = _ref.open,
     actions = _ref.actions,
@@ -10,7 +11,8 @@ export var useRangePickerInputProps = function useRangePickerInputProps(_ref) {
     disableOpenPicker = _ref.disableOpenPicker,
     onBlur = _ref.onBlur,
     rangePosition = _ref.rangePosition,
-    onRangePositionChange = _ref.onRangePositionChange;
+    onRangePositionChange = _ref.onRangePositionChange,
+    inLocaleText = _ref.localeText;
   var localeText = useLocaleText();
   var startRef = React.useRef(null);
   var endRef = React.useRef(null);
@@ -27,14 +29,14 @@ export var useRangePickerInputProps = function useRangePickerInputProps(_ref) {
     }
   }, [rangePosition, open]);
   var openRangeStartSelection = function openRangeStartSelection(event) {
-    event == null ? void 0 : event.stopPropagation();
+    event.stopPropagation();
     onRangePositionChange('start');
     if (!readOnly && !disableOpenPicker) {
       actions.onOpen();
     }
   };
   var openRangeEndSelection = function openRangeEndSelection(event) {
-    event == null ? void 0 : event.stopPropagation();
+    event.stopPropagation();
     onRangePositionChange('end');
     if (!readOnly && !disableOpenPicker) {
       actions.onOpen();
@@ -50,31 +52,30 @@ export var useRangePickerInputProps = function useRangePickerInputProps(_ref) {
       onRangePositionChange('end');
     }
   };
+  var readOnlyInput = readOnly != null ? readOnly : wrapperVariant === 'mobile';
   var startInputProps = _extends({
     inputRef: startRef,
-    label: localeText.start,
+    label: (_inLocaleText$start = inLocaleText == null ? void 0 : inLocaleText.start) != null ? _inLocaleText$start : localeText.start,
     onKeyDown: onSpaceOrEnter(openRangeStartSelection),
     onFocus: focusOnRangeStart,
     focused: open ? rangePosition === 'start' : undefined
   }, !readOnly && !disabled && {
     onClick: openRangeStartSelection
   }, {
-    inputProps: {
-      readOnly: wrapperVariant === 'mobile'
-    }
+    readOnly: readOnlyInput,
+    disabled: disabled
   });
   var endInputProps = _extends({
     inputRef: endRef,
-    label: localeText.end,
+    label: (_inLocaleText$end = inLocaleText == null ? void 0 : inLocaleText.end) != null ? _inLocaleText$end : localeText.end,
     onKeyDown: onSpaceOrEnter(openRangeEndSelection),
     onFocus: focusOnRangeEnd,
     focused: open ? rangePosition === 'end' : undefined
   }, !readOnly && !disabled && {
     onClick: openRangeEndSelection
   }, {
-    inputProps: {
-      readOnly: wrapperVariant === 'mobile'
-    }
+    readOnly: readOnlyInput,
+    disabled: disabled
   });
   var rootProps = {
     onBlur: onBlur

package/legacy/internal/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -21,22 +21,22 @@ var PickerStaticViewLayout = styled(PickersViewLayout)(function (_ref) {
 export var useStaticRangePicker = function useStaticRangePicker(_ref2) {
   var props = _ref2.props,
     valueManager = _ref2.valueManager,
-    viewLookup = _ref2.viewLookup,
     validator = _ref2.validator,
     ref = _ref2.ref;
   var localeText = props.localeText,
     components = props.components,
     componentsProps = props.componentsProps,
-    displayStaticWrapperAs = props.displayStaticWrapperAs;
+    displayStaticWrapperAs = props.displayStaticWrapperAs,
+    autoFocus = props.autoFocus;
   var _React$useState = React.useState('start'),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     rangePosition = _React$useState2[0],
     setRangePosition = _React$useState2[1];
   var _usePicker = usePicker({
       props: props,
-      viewLookup: viewLookup,
       valueManager: valueManager,
       validator: validator,
+      autoFocusView: autoFocus != null ? autoFocus : false,
       additionalViewProps: {},
       wrapperVariant: displayStaticWrapperAs
     }),

package/legacy/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTY3MDQ1NDAwMDAwMA==";
+  var releaseInfo = "MTY3MTgzMjgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/legacy/internal/utils/valueManagers.js

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { replaceInvalidDateByNull, splitFormatIntoSections, addPositionPropertiesToSections, createDateStrFromSections } from '@mui/x-date-pickers/internals';
+import { replaceInvalidDateByNull, splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections, getSectionOrder as _getSectionOrder } from '@mui/x-date-pickers/internals';
 import { splitDateRangeSections, removeLastSeparator } from './date-fields-utils';
 export var rangeValueManager = {
   emptyValue: [null, null],
@@ -44,38 +44,29 @@ export var rangeFieldValueManager = {
       startDate: null,
       endDate: null
     } : splitDateRangeSections(prevSections);
-    var getSections = function getSections(newDate, prevDateSections) {
+    var getSections = function getSections(newDate, prevDateSections, position) {
       var shouldReUsePrevDateSections = !utils.isValid(newDate) && !!prevDateSections;
       if (shouldReUsePrevDateSections) {
         return prevDateSections;
       }
-      return splitFormatIntoSections(utils, localeText, format, newDate);
-    };
-    var rawSectionsOfStartDate = getSections(start, prevDateRangeSections.startDate);
-    var rawSectionsOfEndDate = getSections(end, prevDateRangeSections.endDate);
-    var sectionsOfStartDate = rawSectionsOfStartDate.map(function (section, sectionIndex) {
-      if (sectionIndex === rawSectionsOfStartDate.length - 1) {
+      var sections = splitFormatIntoSections(utils, localeText, format, newDate);
+      return sections.map(function (section, sectionIndex) {
+        if (sectionIndex === sections.length - 1 && position === 'start') {
+          return _extends({}, section, {
+            dateName: position,
+            endSeparator: "".concat(section.endSeparator, "\u2069 \u2013 \u2066")
+          });
+        }
         return _extends({}, section, {
-          dateName: 'start',
-          separator: ' – '
+          dateName: position
         });
-      }
-      return _extends({}, section, {
-        dateName: 'start'
-      });
-    });
-    var sectionsOfEndDate = rawSectionsOfEndDate.map(function (section) {
-      return _extends({}, section, {
-        dateName: 'end'
       });
-    });
-    return addPositionPropertiesToSections([].concat(_toConsumableArray(sectionsOfStartDate), _toConsumableArray(sectionsOfEndDate)));
+    };
+    return addPositionPropertiesToSections([].concat(_toConsumableArray(getSections(start, prevDateRangeSections.startDate, 'start')), _toConsumableArray(getSections(end, prevDateRangeSections.endDate, 'end'))));
   },
   getValueStrFromSections: function getValueStrFromSections(sections) {
     var dateRangeSections = splitDateRangeSections(sections);
-    var startDateStr = createDateStrFromSections(dateRangeSections.startDate, true);
-    var endDateStr = createDateStrFromSections(dateRangeSections.endDate, true);
-    return "".concat(startDateStr).concat(endDateStr);
+    return createDateStrForInputFromSections([].concat(_toConsumableArray(dateRangeSections.startDate), _toConsumableArray(dateRangeSections.endDate)));
   },
   getActiveDateSections: function getActiveDateSections(sections, activeSection) {
     var index = activeSection.dateName === 'start' ? 0 : 1;
@@ -113,5 +104,11 @@ export var rangeFieldValueManager = {
   },
   hasError: function hasError(error) {
     return error[0] != null || error[1] != null;
+  },
+  getSectionOrder: function getSectionOrder(utils, localeText, format, isRTL) {
+    var splitedFormat = splitFormatIntoSections(utils, localeText, format, null);
+    return _getSectionOrder([].concat(_toConsumableArray(splitedFormat.slice(0, splitedFormat.length - 1)), [_extends({}, splitedFormat[splitedFormat.length - 1], {
+      endSeparator: ' – '
+    })], _toConsumableArray(splitedFormat)), isRTL);
   }
 };

package/legacy/tests/describeRangeValidation/testTextFieldRangeValidation.js

@@ -29,7 +29,7 @@ export var testTextFieldRangeValidation = function testTextFieldRangeValidation(
     isSingleInput = _getOptions.isSingleInput,
     withDate = _getOptions.withDate,
     withTime = _getOptions.withTime;
-  if (!['legacy-picker', 'picker'].includes(componentFamily)) {
+  if (!['legacy-picker', 'new-picker'].includes(componentFamily)) {
     return;
   }
   describe('text field:', function () {

package/modern/DateRangeCalendar/DateRangeCalendar.js

@@ -11,7 +11,7 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { Watermark } from '@mui/x-license-pro';
-import { applyDefaultDate, DAY_MARGIN, DayCalendar, defaultReduceAnimations, PickersArrowSwitcher, PickersCalendarHeader, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, WrapperVariantContext } from '@mui/x-date-pickers/internals';
+import { applyDefaultDate, DAY_MARGIN, DayCalendar, defaultReduceAnimations, PickersArrowSwitcher, PickersCalendarHeader, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, WrapperVariantContext, useNow } from '@mui/x-date-pickers/internals';
 import { getReleaseInfo } from '../internal/utils/releaseInfo';
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from './dateRangeCalendarClasses';
 import { isEndOfRange, isRangeValid, isStartOfRange, isWithinRange } from '../internal/utils/date-utils';
@@ -107,6 +107,7 @@ const useUtilityClasses = ownerState => {
 const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar(inProps, ref) {
   const utils = useUtils();
   const localeText = useLocaleText();
+  const now = useNow();
   const props = useDateRangeCalendarDefaultizedProps(inProps, 'MuiDateRangeCalendar');
   const isMobile = React.useContext(WrapperVariantContext) === 'mobile';
   const {
@@ -347,6 +348,25 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   const visibleMonths = React.useMemo(() => Array.from({
     length: calendars
   }).map((_, index) => utils.setMonth(calendarState.currentMonth, utils.getMonth(calendarState.currentMonth) + index)), [utils, calendarState.currentMonth, calendars]);
+  const focusedMonth = React.useMemo(() => {
+    if (!autoFocus) {
+      return null;
+    }
+
+    // The focus priority of the "day" view is as follows:
+    // 1. Month of the `start` date
+    // 2. Month of the `end` date
+    // 3. Month of the current date
+    // 4. First visible month
+
+    if (value[0] != null) {
+      return visibleMonths.find(month => utils.isSameMonth(month, value[0]));
+    }
+    if (value[1] != null) {
+      return visibleMonths.find(month => utils.isSameMonth(month, value[1]));
+    }
+    return visibleMonths.find(month => utils.isSameMonth(month, now)) ?? visibleMonths[0];
+  }, [utils, value, visibleMonths, autoFocus, now]);
   return /*#__PURE__*/_jsxs(DateRangeCalendarRoot, _extends({
     ref: ref,
     className: clsx(className, classes.root),
@@ -359,7 +379,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       className: classes.monthContainer,
       children: [calendars === 1 ? /*#__PURE__*/_jsx(PickersCalendarHeader, {
         views: ['day'],
-        openView: 'day',
+        view: 'day',
         currentMonth: calendarState.currentMonth,
         onMonthChange: (newMonth, direction) => handleChangeMonth({
           newMonth,
@@ -402,7 +422,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         renderLoading: renderLoading,
         components: componentsForDayCalendar,
         componentsProps: componentsPropsForDayCalendar,
-        autoFocus: autoFocus,
+        autoFocus: month === focusedMonth,
         fixedWeekNumber: fixedWeekNumber,
         displayWeekNumber: displayWeekNumber
       }), index)]
@@ -414,6 +434,12 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
   autoFocus: PropTypes.bool,
   /**
    * The number of calendars to render.

package/modern/DateRangePicker/DateRangePicker.js

@@ -55,7 +55,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * @default /\dap/gi
    */
   acceptRegex: PropTypes.instanceOf(RegExp),
-  autoFocus: PropTypes.bool,
   /**
    * The number of calendars that render on **desktop**.
    * @default 2
@@ -235,11 +234,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * Use in controlled mode (see open).
    */
   onOpen: PropTypes.func,
-  /**
-   * Callback fired on view change.
-   * @param {DateView} view The new view.
-   */
-  onViewChange: PropTypes.func,
   /**
    * Control the popup or dialog open state.
    */

package/modern/DateRangePicker/DateRangePickerView.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["calendars", "className", "value", "DateInputProps", "defaultCalendarMonth", "disableAutoMonthSwitching", "disableFuture", "disableHighlightToday", "disablePast", "isMobileKeyboardViewOpen", "maxDate", "minDate", "onDateChange", "onMonthChange", "open", "reduceAnimations", "rangePosition", "onRangePositionChange", "shouldDisableDate", "showToolbar", "toggleMobileKeyboardView", "components", "componentsProps"];
+const _excluded = ["calendars", "className", "value", "DateInputProps", "defaultCalendarMonth", "disableAutoMonthSwitching", "disableFuture", "disableHighlightToday", "disablePast", "isMobileKeyboardViewOpen", "maxDate", "minDate", "onDateChange", "onMonthChange", "open", "reduceAnimations", "rangePosition", "onRangePositionChange", "shouldDisableDate", "showToolbar", "toggleMobileKeyboardView", "components", "componentsProps", "onFocusedViewChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Watermark } from '@mui/x-license-pro';
@@ -40,7 +40,8 @@ function DateRangePickerViewRaw(props) {
       showToolbar,
       toggleMobileKeyboardView,
       components,
-      componentsProps
+      componentsProps,
+      onFocusedViewChange
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
@@ -122,7 +123,9 @@ function DateRangePickerViewRaw(props) {
       components,
       componentsProps,
       shouldDisableDate: wrappedShouldDisableDate
-    }, calendarState, other);
+    }, calendarState, {
+      onFocusedViewChange: onFocusedViewChange ? newHasFocus => onFocusedViewChange('day', newHasFocus) : undefined
+    }, other);
     switch (wrapperVariant) {
       case 'desktop':
         {

package/modern/DateRangePicker/DateRangePickerViewMobile.js

@@ -65,7 +65,7 @@ export function DateRangePickerViewMobile(props) {
       maxDate: maxDateWithDisabled,
       minDate: minDateWithDisabled,
       onMonthChange: changeMonth,
-      openView: "day",
+      view: "day",
       views: onlyDayView,
       disabled: disabled
     }, other)), /*#__PURE__*/_jsx(DayCalendar, _extends({}, other, {

package/modern/DateRangePickerDay/DateRangePickerDay.js

@@ -196,10 +196,26 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
+   */
+  action: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focusVisible: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: PropTypes.bool,
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  className: PropTypes.string,
   /**
    * The date to show.
    */
@@ -219,6 +235,33 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    * @default false
    */
   disableMargin: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: PropTypes.bool,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: PropTypes.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: PropTypes.string,
   isAnimating: PropTypes.bool,
   /**
    * Set to `true` if the `day` is the end of a highlighted date range.
@@ -249,6 +292,11 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    */
   isVisuallySelected: PropTypes.bool,
   onDaySelect: PropTypes.func.isRequired,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: PropTypes.func,
   onMouseEnter: PropTypes.func,
   /**
    * If `true`, day is outside of month and will be hidden.
@@ -264,11 +312,34 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    * @default false
    */
   showDaysOutsideCurrentMonth: PropTypes.bool,
+  style: 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]),
+  /**
+   * @default 0
+   */
+  tabIndex: PropTypes.number,
   /**
    * If `true`, renders as today date.
    * @default false
    */
-  today: PropTypes.bool
+  today: PropTypes.bool,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: PropTypes.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      pulsate: PropTypes.func.isRequired,
+      start: PropTypes.func.isRequired,
+      stop: PropTypes.func.isRequired
+    })
+  })])
 } : void 0;
 
 /**

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -75,7 +75,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes = {
    * @default /\dap/gi
    */
   acceptRegex: PropTypes.instanceOf(RegExp),
-  autoFocus: PropTypes.bool,
   /**
    * The number of calendars that render on **desktop**.
    * @default 2
@@ -249,11 +248,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes = {
    * Use in controlled mode (see open).
    */
   onOpen: PropTypes.func,
-  /**
-   * Callback fired on view change.
-   * @param {DateView} view The new view.
-   */
-  onViewChange: PropTypes.func,
   /**
    * Control the popup or dialog open state.
    */