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

package/internal/hooks/useRangePickerInputProps.js

@@ -53,6 +53,7 @@ export const useRangePickerInputProps = ({
       onRangePositionChange('end');
     }
   };
+  const readOnlyInput = readOnly != null ? readOnly : wrapperVariant === 'mobile';
   const startInputProps = _extends({
     inputRef: startRef,
     label: (_inLocaleText$start = inLocaleText == null ? void 0 : inLocaleText.start) != null ? _inLocaleText$start : localeText.start,
@@ -62,9 +63,8 @@ export const useRangePickerInputProps = ({
   }, !readOnly && !disabled && {
     onClick: openRangeStartSelection
   }, {
-    inputProps: {
-      readOnly: wrapperVariant === 'mobile'
-    }
+    readOnly: readOnlyInput,
+    disabled
   });
   const endInputProps = _extends({
     inputRef: endRef,
@@ -75,9 +75,8 @@ export const useRangePickerInputProps = ({
   }, !readOnly && !disabled && {
     onClick: openRangeEndSelection
   }, {
-    inputProps: {
-      readOnly: wrapperVariant === 'mobile'
-    }
+    readOnly: readOnlyInput,
+    disabled
   });
   const rootProps = {
     onBlur

package/internal/hooks/useStaticRangePicker/useStaticRangePicker.d.ts

@@ -5,6 +5,6 @@ import { UseStaticRangePickerParams, UseStaticRangePickerProps } from './useStat
  * Hook managing all the range static pickers:
  * - StaticDateRangePicker
  */
-export declare const useStaticRangePicker: <TDate, TView extends DateOrTimeView, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any>>({ props, valueManager, viewLookup, validator, ref, }: UseStaticRangePickerParams<TDate, TView, TExternalProps>) => {
+export declare const useStaticRangePicker: <TDate, TView extends DateOrTimeView, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any, TExternalProps>>({ props, valueManager, validator, ref, }: UseStaticRangePickerParams<TDate, TView, TExternalProps>) => {
     renderPicker: () => JSX.Element;
 };

package/internal/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -19,7 +19,6 @@ const PickerStaticViewLayout = styled(PickersViewLayout)(({
 export const useStaticRangePicker = ({
   props,
   valueManager,
-  viewLookup,
   validator,
   ref
 }) => {
@@ -36,7 +35,6 @@ export const useStaticRangePicker = ({
     renderCurrentView
   } = usePicker({
     props,
-    viewLookup,
     valueManager,
     validator,
     autoFocusView: autoFocus != null ? autoFocus : false,

package/internal/hooks/useStaticRangePicker/useStaticRangePicker.types.d.ts

@@ -8,7 +8,7 @@ export interface UseStaticRangePickerSlotsComponentsProps<TDate, TView extends D
 }
 export interface StaticRangeOnlyPickerProps extends StaticOnlyPickerProps {
 }
-export interface UseStaticRangePickerProps<TDate, TView extends DateOrTimeView, TError> extends BaseNextPickerProps<DateRange<TDate>, TDate, TView, TError>, StaticRangeOnlyPickerProps {
+export interface UseStaticRangePickerProps<TDate, TView extends DateOrTimeView, TError, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any, TExternalProps>> extends BaseNextPickerProps<DateRange<TDate>, TDate, TView, TError, TExternalProps, {}>, StaticRangeOnlyPickerProps {
     /**
      * Overrideable components.
      * @default {}
@@ -20,7 +20,7 @@ export interface UseStaticRangePickerProps<TDate, TView extends DateOrTimeView,
      */
     componentsProps?: UseStaticRangePickerSlotsComponentsProps<TDate, TView>;
 }
-export interface UseStaticRangePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, TExternalProps, {}>, 'valueManager' | 'viewLookup' | 'validator'> {
+export interface UseStaticRangePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseStaticRangePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, TExternalProps, {}>, 'valueManager' | 'validator'> {
     props: TExternalProps;
     /**
      * Ref to pass to the root element

package/internal/models/dateRange.d.ts

@@ -14,6 +14,16 @@ export interface DayRangeValidationProps<TDate> {
      */
     shouldDisableDate?: (day: TDate, position: 'start' | 'end') => boolean;
 }
-export interface UseDateRangeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, DateRangeValidationError>, 'format'>, DayRangeValidationProps<TDate>, BaseDateValidationProps<TDate> {
+/**
+ * Props used in every range picker.
+ */
+export interface BaseRangeProps {
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+}
+export interface UseDateRangeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, DateRangeValidationError>, 'format'>, DayRangeValidationProps<TDate>, BaseDateValidationProps<TDate>, BaseRangeProps {
 }
 export type UseDateRangeFieldDefaultizedProps<TDate> = DefaultizedProps<UseDateRangeFieldProps<TDate>, keyof BaseDateValidationProps<TDate> | 'format'>;

package/internal/models/dateTimeRange.d.ts

@@ -1,8 +1,8 @@
 import { BaseDateValidationProps, TimeValidationProps, DefaultizedProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
-import { DayRangeValidationProps } from './dateRange';
+import { BaseRangeProps, DayRangeValidationProps } from './dateRange';
 import { DateRange } from './range';
 import { DateTimeRangeValidationError } from '../hooks/validation/useDateTimeRangeValidation';
-export interface UseDateTimeRangeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, DateTimeRangeValidationError>, 'format'>, DayRangeValidationProps<TDate>, TimeValidationProps<TDate>, BaseDateValidationProps<TDate> {
+export interface UseDateTimeRangeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, DateTimeRangeValidationError>, 'format'>, DayRangeValidationProps<TDate>, TimeValidationProps<TDate>, BaseDateValidationProps<TDate>, BaseRangeProps {
     /**
      * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.
      */

package/internal/models/timeRange.d.ts

@@ -1,7 +1,8 @@
 import { BaseTimeValidationProps, TimeValidationProps, DefaultizedProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
 import { DateRange } from './range';
 import { TimeRangeValidationError } from '../hooks/validation/useTimeRangeValidation';
-export interface UseTimeRangeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, TimeRangeValidationError>, 'format'>, TimeValidationProps<TDate>, BaseTimeValidationProps {
+import { BaseRangeProps } from './dateRange';
+export interface UseTimeRangeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, TimeRangeValidationError>, 'format'>, TimeValidationProps<TDate>, BaseTimeValidationProps, BaseRangeProps {
     /**
      * 12h/24h view for hour selection clock.
      * @default `utils.is12HourCycleInCurrentLocale()`

package/internal/utils/date-fields-utils.d.ts

@@ -3,4 +3,20 @@ export declare const splitDateRangeSections: (sections: RangeFieldSection[]) =>
     startDate: RangeFieldSection[];
     endDate: RangeFieldSection[];
 };
-export declare const removeLastSeparator: (dateSections: RangeFieldSection[]) => RangeFieldSection[];
+export declare const removeLastSeparator: (dateSections: RangeFieldSection[]) => (RangeFieldSection | {
+    separator: null;
+    dateName: "start" | "end";
+    start: number;
+    end: number;
+    startInInput: number;
+    endInInput: number;
+    value: string;
+    placeholder: string;
+    startSeparator: string;
+    endSeparator: string;
+    dateSectionName: import("@mui/x-date-pickers").MuiDateSectionName;
+    contentType: "digit" | "letter";
+    formatValue: string;
+    edited: boolean;
+    hasTrailingZeroes: boolean;
+})[];

package/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY3MTE0NTIwMDAwMA==";
+  const 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/internal/utils/valueManagers.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { replaceInvalidDateByNull, splitFormatIntoSections, addPositionPropertiesToSections, createDateStrFromSections, getSectionOrder } from '@mui/x-date-pickers/internals';
+import { replaceInvalidDateByNull, splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections, getSectionOrder } from '@mui/x-date-pickers/internals';
 import { splitDateRangeSections, removeLastSeparator } from './date-fields-utils';
 export const rangeValueManager = {
   emptyValue: [null, null],
@@ -29,35 +29,29 @@ export const rangeFieldValueManager = {
       startDate: null,
       endDate: null
     } : splitDateRangeSections(prevSections);
-    const getSections = (newDate, prevDateSections) => {
+    const getSections = (newDate, prevDateSections, position) => {
       const shouldReUsePrevDateSections = !utils.isValid(newDate) && !!prevDateSections;
       if (shouldReUsePrevDateSections) {
         return prevDateSections;
       }
-      return splitFormatIntoSections(utils, localeText, format, newDate);
-    };
-    const rawSectionsOfStartDate = getSections(start, prevDateRangeSections.startDate);
-    const rawSectionsOfEndDate = getSections(end, prevDateRangeSections.endDate);
-    const sectionsOfStartDate = rawSectionsOfStartDate.map((section, sectionIndex) => {
-      if (sectionIndex === rawSectionsOfStartDate.length - 1) {
+      const sections = splitFormatIntoSections(utils, localeText, format, newDate);
+      return sections.map((section, sectionIndex) => {
+        if (sectionIndex === sections.length - 1 && position === 'start') {
+          return _extends({}, section, {
+            dateName: position,
+            endSeparator: `${section.endSeparator}\u2069 – \u2066`
+          });
+        }
         return _extends({}, section, {
-          dateName: 'start',
-          separator: `\u2069 – \u2066`,
-          parsingSeparator: ' – '
+          dateName: position
         });
-      }
-      return _extends({}, section, {
-        dateName: 'start'
       });
-    });
-    const sectionsOfEndDate = rawSectionsOfEndDate.map(section => _extends({}, section, {
-      dateName: 'end'
-    }));
-    return addPositionPropertiesToSections([...sectionsOfStartDate, ...sectionsOfEndDate]);
+    };
+    return addPositionPropertiesToSections([...getSections(start, prevDateRangeSections.startDate, 'start'), ...getSections(end, prevDateRangeSections.endDate, 'end')]);
   },
   getValueStrFromSections: sections => {
     const dateRangeSections = splitDateRangeSections(sections);
-    return createDateStrFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate], true);
+    return createDateStrForInputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate]);
   },
   getActiveDateSections: (sections, activeSection) => {
     const index = activeSection.dateName === 'start' ? 0 : 1;
@@ -90,7 +84,7 @@ export const rangeFieldValueManager = {
   getSectionOrder: (utils, localeText, format, isRTL) => {
     const splitedFormat = splitFormatIntoSections(utils, localeText, format, null);
     return getSectionOrder([...splitedFormat.slice(0, splitedFormat.length - 1), _extends({}, splitedFormat[splitedFormat.length - 1], {
-      separator: ' – '
+      endSeparator: ' – '
     }), ...splitedFormat], isRTL);
   }
 };

package/legacy/DateRangeCalendar/DateRangeCalendar.js

@@ -408,7 +408,7 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
         className: classes.monthContainer,
         children: [calendars === 1 ? /*#__PURE__*/_jsx(PickersCalendarHeader, {
           views: ['day'],
-          openView: 'day',
+          view: 'day',
           currentMonth: calendarState.currentMonth,
           onMonthChange: function onMonthChange(newMonth, direction) {
             return handleChangeMonth({
@@ -466,6 +466,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/legacy/DateRangePicker/DateRangePicker.js

@@ -233,11 +233,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/legacy/DateRangePicker/DateRangePickerView.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["calendars", "className", "value", "DateInputProps", "defaultCalendarMonth", "disableAutoMonthSwitching", "disableFuture", "disableHighlightToday", "disablePast", "isMobileKeyboardViewOpen", "maxDate", "minDate", "onDateChange", "onMonthChange", "open", "reduceAnimations", "rangePosition", "onRangePositionChange", "shouldDisableDate", "showToolbar", "toggleMobileKeyboardView", "components", "componentsProps"];
+var _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';
@@ -44,6 +44,7 @@ function DateRangePickerViewRaw(props) {
     toggleMobileKeyboardView = props.toggleMobileKeyboardView,
     components = props.components,
     componentsProps = props.componentsProps,
+    onFocusedViewChange = props.onFocusedViewChange,
     other = _objectWithoutProperties(props, _excluded);
   var utils = useUtils();
   var wrapperVariant = React.useContext(WrapperVariantContext);
@@ -127,7 +128,11 @@ function DateRangePickerViewRaw(props) {
       components: components,
       componentsProps: componentsProps,
       shouldDisableDate: wrappedShouldDisableDate
-    }, calendarState, other);
+    }, calendarState, {
+      onFocusedViewChange: onFocusedViewChange ? function (newHasFocus) {
+        return onFocusedViewChange('day', newHasFocus);
+      } : undefined
+    }, other);
     switch (wrapperVariant) {
       case 'desktop':
         {

package/legacy/DateRangePicker/DateRangePickerViewMobile.js

@@ -68,7 +68,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/legacy/DateRangePickerDay/DateRangePickerDay.js

@@ -187,10 +187,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.
    */
@@ -210,6 +226,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.
@@ -240,6 +283,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.
@@ -255,11 +303,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/legacy/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -251,11 +251,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.
    */

package/legacy/DesktopNextDateRangePicker/DesktopNextDateRangePicker.js

@@ -7,13 +7,10 @@ import { extractValidationProps } from '@mui/x-date-pickers/internals';
 import { resolveComponentProps } from '@mui/base/utils';
 import { rangeValueManager } from '../internal/utils/valueManagers';
 import { useNextDateRangePickerDefaultizedProps } from '../NextDateRangePicker/shared';
-import { useDesktopRangePicker } from '../internal/hooks/useDesktopRangePicker';
+import { renderDateRangeViewCalendar } from '../dateRangeViewRenderers';
 import { Unstable_MultiInputDateRangeField as MultiInputDateRangeField } from '../MultiInputDateRangeField';
-import { renderDateRangeView } from '../internal/utils/viewRenderers';
+import { useDesktopRangePicker } from '../internal/hooks/useDesktopRangePicker';
 import { validateDateRange } from '../internal/hooks/validation/useDateRangeValidation';
-var VIEW_LOOKUP = {
-  day: renderDateRangeView
-};
 var DesktopNextDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopNextDateRangePicker(inProps, ref) {
   var _defaultizedProps$cal, _defaultizedProps$sho;
   // Props with the default values common to all date time pickers
@@ -21,7 +18,11 @@ var DesktopNextDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopN
     className = _useNextDateRangePick.className,
     sx = _useNextDateRangePick.sx,
     defaultizedProps = _objectWithoutProperties(_useNextDateRangePick, _excluded);
+  var viewRenderers = _extends({
+    day: renderDateRangeViewCalendar
+  }, defaultizedProps.viewRenderers);
   var props = _extends({}, defaultizedProps, {
+    viewRenderers: viewRenderers,
     calendars: (_defaultizedProps$cal = defaultizedProps.calendars) != null ? _defaultizedProps$cal : 2,
     views: ['day'],
     openTo: 'day',
@@ -43,7 +44,6 @@ var DesktopNextDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopN
   var _useDesktopRangePicke = useDesktopRangePicker({
       props: props,
       valueManager: rangeValueManager,
-      viewLookup: VIEW_LOOKUP,
       validator: validateDateRange
     }),
     renderPicker = _useDesktopRangePicke.renderPicker;
@@ -54,6 +54,12 @@ DesktopNextDateRangePicker.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 on **desktop**.
@@ -234,7 +240,7 @@ DesktopNextDateRangePicker.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),
@@ -264,6 +270,14 @@ DesktopNextDateRangePicker.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.arrayOf(PropTypes.any)
+  value: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be the used.
+   */
+  viewRenderers: PropTypes.shape({
+    day: PropTypes.func
+  })
 };
 export { DesktopNextDateRangePicker };

package/legacy/MobileDateRangePicker/MobileDateRangePicker.js

@@ -256,11 +256,6 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.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/legacy/MobileNextDateRangePicker/MobileNextDateRangePicker.js

@@ -7,13 +7,10 @@ import { extractValidationProps } from '@mui/x-date-pickers/internals';
 import { resolveComponentProps } from '@mui/base/utils';
 import { rangeValueManager } from '../internal/utils/valueManagers';
 import { useNextDateRangePickerDefaultizedProps } from '../NextDateRangePicker/shared';
-import { useMobileRangePicker } from '../internal/hooks/useMobileRangePicker';
+import { renderDateRangeViewCalendar } from '../dateRangeViewRenderers';
 import { Unstable_MultiInputDateRangeField as MultiInputDateRangeField } from '../MultiInputDateRangeField';
-import { renderDateRangeView } from '../internal/utils/viewRenderers';
+import { useMobileRangePicker } from '../internal/hooks/useMobileRangePicker';
 import { validateDateRange } from '../internal/hooks/validation/useDateRangeValidation';
-var VIEW_LOOKUP = {
-  day: renderDateRangeView
-};
 var MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileNextDateRangePicker(inProps, ref) {
   var _defaultizedProps$cal, _defaultizedProps$sho;
   // Props with the default values common to all date time pickers
@@ -21,7 +18,11 @@ var MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileNex
     className = _useNextDateRangePick.className,
     sx = _useNextDateRangePick.sx,
     defaultizedProps = _objectWithoutProperties(_useNextDateRangePick, _excluded);
+  var viewRenderers = _extends({
+    day: renderDateRangeViewCalendar
+  }, defaultizedProps.viewRenderers);
   var props = _extends({}, defaultizedProps, {
+    viewRenderers: viewRenderers,
     calendars: (_defaultizedProps$cal = defaultizedProps.calendars) != null ? _defaultizedProps$cal : 1,
     views: ['day'],
     openTo: 'day',
@@ -43,7 +44,6 @@ var MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileNex
   var _useMobileRangePicker = useMobileRangePicker({
       props: props,
       valueManager: rangeValueManager,
-      viewLookup: VIEW_LOOKUP,
       validator: validateDateRange
     }),
     renderPicker = _useMobileRangePicker.renderPicker;
@@ -54,6 +54,12 @@ MobileNextDateRangePicker.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 on **desktop**.
@@ -234,7 +240,7 @@ MobileNextDateRangePicker.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),
@@ -264,6 +270,14 @@ MobileNextDateRangePicker.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.arrayOf(PropTypes.any)
+  value: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be the used.
+   */
+  viewRenderers: PropTypes.shape({
+    day: PropTypes.func
+  })
 };
 export { MobileNextDateRangePicker };