@mui/x-date-pickers-pro 8.0.0-alpha.1 → 8.0.0-alpha.11

package/DateRangeCalendar/DateRangeCalendar.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "classes", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
+const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "classes", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "focusedView", "onFocusedViewChange", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -15,7 +15,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
 import { Watermark } from '@mui/x-license';
-import { applyDefaultDate, DayCalendar, useDefaultReduceAnimations, useCalendarState, useDefaultDates, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValueWithTimezone, useViews, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
+import { applyDefaultDate, DayCalendar, useReduceAnimations, useCalendarState, useDefaultDates, useUtils, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValueWithTimezone, useViews, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
 import { warnOnce } from '@mui/x-internals/warning';
 import { getReleaseInfo } from "../internals/utils/releaseInfo.js";
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from "./dateRangeCalendarClasses.js";
@@ -27,6 +27,7 @@ import { useDragRange } from "./useDragRange.js";
 import { useRangePosition } from "../internals/hooks/useRangePosition.js";
 import { DAY_RANGE_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.js";
 import { PickersRangeCalendarHeader } from "../PickersRangeCalendarHeader/index.js";
+import { useNullablePickerRangePositionContext } from "../internals/hooks/useNullablePickerRangePositionContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
 const DateRangeCalendarRoot = styled('div', {
@@ -75,16 +76,16 @@ const DayCalendarForRange = InnerDayCalendarForRange;
 function useDateRangeCalendarDefaultizedProps(props, name) {
   const utils = useUtils();
   const defaultDates = useDefaultDates();
-  const defaultReduceAnimations = useDefaultReduceAnimations();
   const themeProps = useThemeProps({
     props,
     name
   });
+  const reduceAnimations = useReduceAnimations(themeProps.reduceAnimations);
   return _extends({}, themeProps, {
     renderLoading: themeProps.renderLoading ?? (() => /*#__PURE__*/_jsx("span", {
       children: "..."
     })),
-    reduceAnimations: themeProps.reduceAnimations ?? defaultReduceAnimations,
+    reduceAnimations,
     loading: props.loading ?? false,
     disablePast: props.disablePast ?? false,
     disableFuture: props.disableFuture ?? false,
@@ -135,8 +136,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       reduceAnimations,
       onMonthChange,
       rangePosition: rangePositionProp,
-      defaultRangePosition: inDefaultRangePosition,
-      onRangePositionChange: inOnRangePositionChange,
+      defaultRangePosition: defaultRangePositionProp,
+      onRangePositionChange: onRangePositionChangeProp,
       calendars,
       currentMonthCalendarPosition = 1,
       slots,
@@ -144,6 +145,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       loading,
       renderLoading,
       disableHighlightToday,
+      focusedView: focusedViewProp,
+      onFocusedViewChange,
       readOnly,
       disabled,
       showDaysOutsideCurrentMonth,
@@ -161,6 +164,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       onViewChange
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rangePositionContext = useNullablePickerRangePositionContext();
   const {
     value,
     handleValueChange,
@@ -175,30 +179,33 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     valueManager: rangeValueManager
   });
   const {
-    setValueAndGoToNextView,
-    view
+    view,
+    setFocusedView,
+    focusedView,
+    setValueAndGoToNextView
   } = useViews({
     view: inView,
     views,
     openTo,
     onChange: handleValueChange,
     onViewChange,
-    autoFocus
+    autoFocus,
+    focusedView: focusedViewProp,
+    onFocusedViewChange
   });
   const utils = useUtils();
-  const now = useNow(timezone);
   const id = useId();
   const {
     rangePosition,
-    onRangePositionChange
+    setRangePosition
   } = useRangePosition({
-    rangePosition: rangePositionProp,
-    defaultRangePosition: inDefaultRangePosition,
-    onRangePositionChange: inOnRangePositionChange
+    rangePosition: rangePositionProp ?? rangePositionContext?.rangePosition,
+    defaultRangePosition: defaultRangePositionProp,
+    onRangePositionChange: onRangePositionChangeProp ?? rangePositionContext?.setRangePosition
   });
   const handleDatePositionChange = useEventCallback(position => {
     if (rangePosition !== position) {
-      onRangePositionChange(position);
+      setRangePosition(position);
     }
   });
   const handleSelectedDayChange = useEventCallback((newDate, selectionState, allowRangeFlip = false) => {
@@ -216,7 +223,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     });
     const isNextSectionAvailable = availableRangePositions.includes(nextSelection);
     if (isNextSectionAvailable) {
-      onRangePositionChange(nextSelection);
+      setRangePosition(nextSelection);
     }
     const isFullRangeSelected = rangePosition === 'end' && isRangeValid(utils, newRange);
     setValueAndGoToNextView(newRange, isFullRangeSelected || !isNextSectionAvailable ? 'finish' : 'partial', view);
@@ -228,7 +235,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
 
   // Range going for the start of the start day to the end of the end day.
   // This makes sure that `isWithinRange` works with any time in the start and end day.
-  const valueDayRange = React.useMemo(() => [value[0] == null || !utils.isValid(value[0]) ? value[0] : utils.startOfDay(value[0]), value[1] == null || !utils.isValid(value[1]) ? value[1] : utils.endOfDay(value[1])], [value, utils]);
+  const valueDayRange = React.useMemo(() => [!utils.isValid(value[0]) ? value[0] : utils.startOfDay(value[0]), !utils.isValid(value[1]) ? value[1] : utils.endOfDay(value[1])], [value, utils]);
   const _useDragRange = useDragRange({
       disableDragEditing: shouldDisableDragEditing,
       onDrop: handleDrop,
@@ -271,22 +278,39 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   }, [shouldDisableDate, rangePosition, draggingDatePosition]);
   const {
     calendarState,
-    changeFocusedDay,
-    changeMonth,
-    handleChangeMonth,
+    setVisibleDate,
     onMonthSwitchingAnimationEnd
   } = useCalendarState({
     value: value[0] || value[1],
     referenceDate,
     disableFuture,
     disablePast,
-    disableSwitchToMonthOnDayFocus: true,
     maxDate,
     minDate,
     onMonthChange,
     reduceAnimations,
     shouldDisableDate: wrappedShouldDisableDate,
-    timezone
+    timezone,
+    getCurrentMonthFromVisibleDate: (visibleDate, prevMonth) => {
+      const firstVisibleMonth = utils.addMonths(prevMonth, 1 - currentMonthCalendarPosition);
+      const lastVisibleMonth = utils.endOfMonth(utils.addMonths(firstVisibleMonth, calendars - 1));
+
+      // The new focused day is inside the visible calendars,
+      // Do not change the current month
+      if (utils.isWithinRange(visibleDate, [firstVisibleMonth, lastVisibleMonth])) {
+        return prevMonth;
+      }
+
+      // The new focused day is after the last visible month,
+      // Move the current month so that the new focused day is inside the first visible month
+      if (utils.isAfter(visibleDate, lastVisibleMonth)) {
+        return utils.startOfMonth(utils.addMonths(visibleDate, currentMonthCalendarPosition - 1));
+      }
+
+      // The new focused day is before the first visible month,
+      // Move the current month so that the new focused day is inside the last visible month
+      return utils.startOfMonth(utils.addMonths(visibleDate, currentMonthCalendarPosition - calendars));
+    }
   });
   const CalendarHeader = slots?.calendarHeader ?? PickersRangeCalendarHeader;
   const calendarHeaderProps = useSlotProps({
@@ -297,9 +321,9 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       views: ['day'],
       view: 'day',
       currentMonth: calendarState.currentMonth,
-      onMonthChange: (newMonth, direction) => handleChangeMonth({
-        newMonth,
-        direction
+      onMonthChange: month => setVisibleDate({
+        target: month,
+        reason: 'header-navigation'
       }),
       minDate,
       maxDate,
@@ -313,10 +337,12 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     },
     ownerState
   });
+
+  // TODO: Move this logic inside the render instead of using an effect
   const prevValue = React.useRef(null);
   React.useEffect(() => {
     const date = rangePosition === 'start' ? value[0] : value[1];
-    if (!date || !utils.isValid(date)) {
+    if (!utils.isValid(date)) {
       return;
     }
     const prevDate = rangePosition === 'start' ? prevValue.current?.[0] : prevValue.current?.[1];
@@ -334,7 +360,10 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       const newMonth = rangePosition === 'start' ? date :
       // If need to focus end, scroll to the state when "end" is displaying in the last calendar
       utils.addMonths(date, -displayingMonthRange);
-      changeMonth(newMonth);
+      setVisibleDate({
+        target: newMonth,
+        reason: 'controlled-value-change'
+      });
     }
   }, [rangePosition, value]); // eslint-disable-line
 
@@ -417,25 +446,19 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       length: calendars
     }).map((_, index) => utils.addMonths(firstMonth, index));
   }, [utils, calendarState.currentMonth, calendars, currentMonthCalendarPosition]);
-  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]));
+  const hasFocus = focusedView !== null;
+  const prevOpenViewRef = React.useRef(view);
+  React.useEffect(() => {
+    // If the view change and the focus was on the previous view
+    // Then we update the focus.
+    if (prevOpenViewRef.current === view) {
+      return;
     }
-    if (value[1] != null) {
-      return visibleMonths.find(month => utils.isSameMonth(month, value[1]));
+    if (focusedView === prevOpenViewRef.current) {
+      setFocusedView(view, true);
     }
-    return visibleMonths.find(month => utils.isSameMonth(month, now)) ?? visibleMonths[0];
-  }, [utils, value, visibleMonths, autoFocus, now]);
+    prevOpenViewRef.current = view;
+  }, [focusedView, setFocusedView, view]);
   return /*#__PURE__*/_jsxs(DateRangeCalendarRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
@@ -457,20 +480,24 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
           className: classes.dayCalendar
         }, calendarState, baseDateValidationProps, commonViewProps, {
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
-          onFocusedDayChange: changeFocusedDay,
+          onFocusedDayChange: focusedDate => setVisibleDate({
+            target: focusedDate,
+            reason: 'cell-interaction'
+          }),
           reduceAnimations: reduceAnimations,
           selectedDays: value,
           onSelectedDaysChange: handleSelectedDayChange,
           currentMonth: month,
           TransitionProps: CalendarTransitionProps,
           shouldDisableDate: wrappedShouldDisableDate,
+          hasFocus: hasFocus,
+          onFocusedViewChange: isViewFocused => setFocusedView('day', isViewFocused),
           showDaysOutsideCurrentMonth: calendars === 1 && showDaysOutsideCurrentMonth,
           dayOfWeekFormatter: dayOfWeekFormatter,
           loading: loading,
           renderLoading: renderLoading,
           slots: slotsForDayCalendar,
           slotProps: slotPropsForDayCalendar,
-          autoFocus: month === focusedMonth,
           fixedWeekNumber: fixedWeekNumber,
           displayWeekNumber: displayWeekNumber,
           timezone: timezone,

package/DateRangePicker/DateRangePicker.js

@@ -63,7 +63,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   calendars: PropTypes.oneOf([1, 2, 3]),
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
+   * If `true`, the Picker will close after submitting the full date.
    * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
    */
   closeOnSelect: PropTypes.bool,
@@ -158,12 +158,10 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
-   * Ignored if the field has several inputs.
    */
   inputRef: refType,
   /**
    * The label content.
-   * Ignored if the field has several inputs.
    */
   label: PropTypes.node,
   /**
@@ -189,7 +187,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   minDate: PropTypes.object,
   /**
    * Name attribute used by the `input` element in the Field.
-   * Ignored if the field has several inputs.
    */
   name: PropTypes.string,
   /**

package/DateRangePicker/DateRangePicker.types.d.ts

@@ -1,7 +1,6 @@
 import { BaseSingleInputFieldProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { DesktopDateRangePickerProps, DesktopDateRangePickerSlots, DesktopDateRangePickerSlotProps } from '../DesktopDateRangePicker';
 import { MobileDateRangePickerProps, MobileDateRangePickerSlots, MobileDateRangePickerSlotProps } from '../MobileDateRangePicker';
-import { DateRangeValidationError, RangeFieldSection } from '../models';
 import { ValidateDateRangeProps } from '../validation';
 export interface DateRangePickerSlots extends DesktopDateRangePickerSlots, MobileDateRangePickerSlots {
 }
@@ -24,8 +23,13 @@ export interface DateRangePickerProps<TEnableAccessibleFieldDOMStructure extends
      * @default {}
      */
     slotProps?: DateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+    /**
+     * If `true`, the Picker will close after submitting the full date.
+     * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+     */
+    closeOnSelect?: boolean;
 }
 /**
  * Props the field can receive when used inside a date range picker (<DateRangePicker />, <DesktopDateRangePicker /> or <MobileDateRangePicker /> component).
  */
-export type DateRangePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateDateRangeProps & BaseSingleInputFieldProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>;
+export type DateRangePickerFieldProps = ValidateDateRangeProps & BaseSingleInputFieldProps<PickerRangeValue>;

package/DateRangePicker/DateRangePickerToolbar.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { BaseToolbarProps, ExportedBaseToolbarProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
-import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
+import { BaseToolbarProps, ExportedBaseToolbarProps } from '@mui/x-date-pickers/internals';
 import { DateRangePickerToolbarClasses } from './dateRangePickerToolbarClasses';
-export interface DateRangePickerToolbarProps extends ExportedDateRangePickerToolbarProps, Omit<BaseToolbarProps<PickerRangeValue, 'day'>, 'onChange' | 'isLandscape'>, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
+export interface DateRangePickerToolbarProps extends ExportedDateRangePickerToolbarProps, Omit<BaseToolbarProps, 'onChange' | 'isLandscape'> {
 }
 export interface ExportedDateRangePickerToolbarProps extends ExportedBaseToolbarProps {
     /**

package/DateRangePicker/DateRangePickerToolbar.js

@@ -2,21 +2,19 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["value", "rangePosition", "onRangePositionChange", "toolbarFormat", "className", "onViewChange", "view", "views"];
+const _excluded = ["toolbarFormat", "className", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { PickersToolbar, PickersToolbarButton, useUtils } from '@mui/x-date-pickers/internals';
-import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { PickersToolbar, PickersToolbarButton, useUtils, useToolbarOwnerState } from '@mui/x-date-pickers/internals';
+import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { getDateRangePickerToolbarUtilityClass } from "./dateRangePickerToolbarClasses.js";
+import { usePickerRangePositionContext } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     container: ['container']
@@ -52,39 +50,50 @@ const DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateRangeP
     name: 'MuiDateRangePickerToolbar'
   });
   const {
-      value: [start, end],
-      rangePosition,
-      onRangePositionChange,
-      toolbarFormat,
-      className
+      toolbarFormat: toolbarFormatProp,
+      className,
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    value
+  } = usePickerContext();
   const translations = usePickerTranslations();
-  const startDateValue = start ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate) : translations.start;
-  const endDateValue = end ? utils.formatByString(end, toolbarFormat || utils.formats.shortDate) : translations.end;
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = useToolbarOwnerState();
+  const {
+    rangePosition,
+    setRangePosition
+  } = usePickerRangePositionContext();
+  const classes = useUtilityClasses(classesProp);
+
+  // This can't be a default value when spreading because it breaks the API generation.
+  const toolbarFormat = toolbarFormatProp ?? utils.formats.shortDate;
+  const formatDate = (date, fallback) => {
+    if (!utils.isValid(date)) {
+      return fallback;
+    }
+    return utils.formatByString(date, toolbarFormat);
+  };
   return /*#__PURE__*/_jsx(DateRangePickerToolbarRoot, _extends({}, other, {
     toolbarTitle: translations.dateRangePickerToolbarTitle,
-    isLandscape: false,
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ref: ref,
     children: /*#__PURE__*/_jsxs(DateRangePickerToolbarContainer, {
       className: classes.container,
       children: [/*#__PURE__*/_jsx(PickersToolbarButton, {
-        variant: start !== null ? 'h5' : 'h6',
-        value: startDateValue,
+        variant: value[0] == null ? 'h6' : 'h5',
+        value: formatDate(value[0], translations.start),
         selected: rangePosition === 'start',
-        onClick: () => onRangePositionChange('start')
+        onClick: () => setRangePosition('start')
       }), /*#__PURE__*/_jsxs(Typography, {
         variant: "h5",
         children: ["\xA0", '–', "\xA0"]
       }), /*#__PURE__*/_jsx(PickersToolbarButton, {
-        variant: end !== null ? 'h5' : 'h6',
-        value: endDateValue,
+        variant: value[1] == null ? 'h6' : 'h5',
+        value: formatDate(value[1], translations.end),
         selected: rangePosition === 'end',
-        onClick: () => onRangePositionChange('end')
+        onClick: () => setRangePosition('end')
       })]
     })
   }));
@@ -104,14 +113,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    * @default `true` for Desktop, `false` for Mobile.
    */
   hidden: PropTypes.bool,
-  onRangePositionChange: PropTypes.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
-  rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -125,15 +126,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    * Toolbar value placeholder—it is displayed when the value is empty.
    * @default "––"
    */
-  toolbarPlaceholder: PropTypes.node,
-  value: PropTypes.arrayOf(PropTypes.object).isRequired,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['day']).isRequired,
-  /**
-   * Available views.
-   */
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day'])).isRequired
+  toolbarPlaceholder: PropTypes.node
 } : void 0;
 export { DateRangePickerToolbar };

package/DateRangePicker/shared.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { LocalizedComponent } from '@mui/x-date-pickers/locales';
-import { BaseDateValidationProps, BasePickerInputProps, PickerViewRendererLookup, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { BasePickerInputProps, PickerViewRendererLookup, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { DateRangeValidationError } from '../models';
 import { DateRangeCalendarSlots, DateRangeCalendarSlotProps, ExportedDateRangeCalendarProps } from '../DateRangeCalendar';
 import { DateRangePickerToolbarProps, ExportedDateRangePickerToolbarProps } from './DateRangePickerToolbar';
 import { DateRangeViewRendererProps } from '../dateRangeViewRenderers';
+import { ValidateDateRangePropsToDefault } from '../validation/validateDateRange';
 export interface BaseDateRangePickerSlots extends DateRangeCalendarSlots {
     /**
      * Custom component for the toolbar rendered above the views.
@@ -32,8 +33,8 @@ export interface BaseDateRangePickerProps extends Omit<BasePickerInputProps<Pick
      * If `null`, the section will only have field editing.
      * If `undefined`, internally defined view will be used.
      */
-    viewRenderers?: Partial<PickerViewRendererLookup<PickerRangeValue, 'day', DateRangeViewRendererProps<'day'>, {}>>;
+    viewRenderers?: Partial<PickerViewRendererLookup<PickerRangeValue, 'day', DateRangeViewRendererProps<'day'>>>;
 }
-type UseDateRangePickerDefaultizedProps<Props extends BaseDateRangePickerProps> = LocalizedComponent<DefaultizedProps<Props, keyof BaseDateValidationProps>>;
+type UseDateRangePickerDefaultizedProps<Props extends BaseDateRangePickerProps> = LocalizedComponent<DefaultizedProps<Props, ValidateDateRangePropsToDefault>>;
 export declare function useDateRangePickerDefaultizedProps<Props extends BaseDateRangePickerProps>(props: Props, name: string): UseDateRangePickerDefaultizedProps<Props>;
 export {};

package/DateTimeRangePicker/DateTimeRangePicker.js

@@ -68,8 +68,8 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   calendars: PropTypes.oneOf([1, 2, 3]),
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: PropTypes.bool,
   /**
@@ -168,12 +168,10 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
-   * Ignored if the field has several inputs.
    */
   inputRef: refType,
   /**
    * The label content.
-   * Ignored if the field has several inputs.
    */
   label: PropTypes.node,
   /**
@@ -222,7 +220,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Name attribute used by the `input` element in the Field.
-   * Ignored if the field has several inputs.
    */
   name: PropTypes.string,
   /**

package/DateTimeRangePicker/DateTimeRangePicker.types.d.ts

@@ -1,7 +1,6 @@
 import { BaseSingleInputFieldProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { DesktopDateTimeRangePickerProps, DesktopDateTimeRangePickerSlots, DesktopDateTimeRangePickerSlotProps } from '../DesktopDateTimeRangePicker';
 import { MobileDateTimeRangePickerProps, MobileDateTimeRangePickerSlots, MobileDateTimeRangePickerSlotProps } from '../MobileDateTimeRangePicker';
-import { DateTimeRangeValidationError, RangeFieldSection } from '../models';
 import type { ValidateDateTimeRangeProps } from '../validation';
 export interface DateTimeRangePickerSlots extends DesktopDateTimeRangePickerSlots, MobileDateTimeRangePickerSlots {
 }
@@ -28,4 +27,4 @@ export interface DateTimeRangePickerProps<TEnableAccessibleFieldDOMStructure ext
 /**
  * Props the field can receive when used inside a date time range picker (<DateTimeRangePicker />, <DesktopDateTimeRangePicker /> or <MobileDateTimeRangePicker /> component).
  */
-export type DateTimeRangePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateDateTimeRangeProps & BaseSingleInputFieldProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>;
+export type DateTimeRangePickerFieldProps = ValidateDateTimeRangeProps & BaseSingleInputFieldProps<PickerRangeValue>;

package/DateTimeRangePicker/DateTimeRangePickerTabs.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { DateOrTimeViewWithMeridiem, BaseTabsProps, ExportedBaseTabsProps } from '@mui/x-date-pickers/internals';
+import { ExportedBaseTabsProps } from '@mui/x-date-pickers/internals';
 import { DateTimeRangePickerTabsClasses } from './dateTimeRangePickerTabsClasses';
-import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
 export interface ExportedDateTimeRangePickerTabsProps extends ExportedBaseTabsProps {
     /**
      * Toggles visibility of the tabs allowing view switching.
@@ -12,18 +11,18 @@ export interface ExportedDateTimeRangePickerTabsProps extends ExportedBaseTabsPr
      * Date tab icon.
      * @default DateRangeIcon
      */
-    dateIcon?: React.ReactElement;
+    dateIcon?: React.ReactElement<any>;
     /**
      * Time tab icon.
      * @default TimeIcon
      */
-    timeIcon?: React.ReactElement;
+    timeIcon?: React.ReactElement<any>;
     /**
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<DateTimeRangePickerTabsClasses>;
 }
-export interface DateTimeRangePickerTabsProps extends ExportedDateTimeRangePickerTabsProps, BaseTabsProps<DateOrTimeViewWithMeridiem>, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
+export interface DateTimeRangePickerTabsProps extends ExportedDateTimeRangePickerTabsProps {
 }
 declare const DateTimeRangePickerTabs: {
     (inProps: DateTimeRangePickerTabsProps): React.JSX.Element | null;