@mui/x-date-pickers-pro 8.0.0-alpha.6 → 8.0.0-alpha.7

package/internals/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -7,6 +7,7 @@ import { styled } from '@mui/material/styles';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
 import { usePicker, DIALOG_WIDTH, PickerProvider } from '@mui/x-date-pickers/internals';
 import { useRangePosition } from "../useRangePosition.js";
+import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickerStaticLayout = styled(PickersLayout)(({
   theme
@@ -35,12 +36,8 @@ export const useStaticRangePicker = _ref => {
     displayStaticWrapperAs,
     autoFocus
   } = props;
+  const rangePositionResponse = useRangePosition(props);
   const {
-    rangePosition,
-    onRangePositionChange
-  } = useRangePosition(props);
-  const {
-    layoutProps,
     providerProps,
     renderCurrentView
   } = usePicker(_extends({}, pickerParams, {
@@ -48,29 +45,22 @@ export const useStaticRangePicker = _ref => {
     autoFocusView: autoFocus ?? false,
     fieldRef: undefined,
     localeText,
-    additionalViewProps: {
-      rangePosition,
-      onRangePositionChange
-    },
     variant: displayStaticWrapperAs
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
-  const slotPropsForLayout = _extends({}, slotProps, {
-    toolbar: _extends({}, slotProps?.toolbar, {
-      rangePosition,
-      onRangePositionChange
-    })
-  });
-  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-    children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
-      slots: slots,
-      slotProps: slotPropsForLayout,
-      sx: [...(Array.isArray(sx) ? sx : [sx]), ...(Array.isArray(slotProps?.layout?.sx) ? slotProps.layout.sx : [slotProps?.layout?.sx])],
-      className: clsx(className, slotProps?.layout?.className),
-      ref: ref,
-      children: renderCurrentView()
+  const renderPicker = () => /*#__PURE__*/_jsx(PickerRangePositionContext.Provider, {
+    value: rangePositionResponse,
+    children: /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
+      children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+        slots: slots,
+        slotProps: slotProps,
+        sx: [...(Array.isArray(sx) ? sx : [sx]), ...(Array.isArray(slotProps?.layout?.sx) ? slotProps.layout.sx : [slotProps?.layout?.sx])],
+        className: clsx(className, slotProps?.layout?.className),
+        ref: ref,
+        children: renderCurrentView()
+      }))
     }))
-  }));
+  });
   return {
     renderPicker
   };

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

@@ -9,7 +9,7 @@ export interface UseStaticRangePickerSlotProps extends ExportedPickersLayoutSlot
 }
 export interface StaticRangeOnlyPickerProps extends StaticOnlyPickerProps, UseRangePositionProps {
 }
-export interface UseStaticRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>> extends BasePickerProps<PickerRangeValue, TView, TError, TExternalProps, {}>, StaticRangeOnlyPickerProps {
+export interface UseStaticRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>> extends BasePickerProps<PickerRangeValue, TView, TError, TExternalProps>, StaticRangeOnlyPickerProps {
     /**
      * Overridable components.
      * @default {}
@@ -21,7 +21,7 @@ export interface UseStaticRangePickerProps<TView extends DateOrTimeViewWithMerid
      */
     slotProps?: UseStaticRangePickerSlotProps;
 }
-export interface UseStaticRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParams<PickerRangeValue, TView, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
+export interface UseStaticRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParams<PickerRangeValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator'> {
     props: TExternalProps;
     /**
      * Ref to pass to the root element

package/internals/utils/date-range-manager.js

@@ -8,7 +8,8 @@ export function calculateRangeChange({
   shouldMergeDateAndTime = false,
   referenceDate
 }) {
-  const [start, end] = range;
+  const start = !utils.isValid(range[0]) ? null : range[0];
+  const end = !utils.isValid(range[1]) ? null : range[1];
   if (shouldMergeDateAndTime && selectedDate) {
     // If there is a date already selected, then we want to keep its time
     if (start && rangePosition === 'start') {

package/internals/utils/releaseInfo.js

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

@@ -12,8 +12,8 @@ export const rangeValueManager = {
         referenceDate: referenceDateProp
       } = _ref,
       params = _objectWithoutPropertiesLoose(_ref, _excluded);
-    const shouldKeepStartDate = value[0] != null && params.utils.isValid(value[0]);
-    const shouldKeepEndDate = value[1] != null && params.utils.isValid(value[1]);
+    const shouldKeepStartDate = params.utils.isValid(value[0]);
+    const shouldKeepEndDate = params.utils.isValid(value[1]);
     if (shouldKeepStartDate && shouldKeepEndDate) {
       return value;
     }
@@ -26,8 +26,8 @@ export const rangeValueManager = {
   hasError: error => error[0] != null || error[1] != null,
   defaultErrorState: [null, null],
   getTimezone: (utils, value) => {
-    const timezoneStart = value[0] == null || !utils.isValid(value[0]) ? null : utils.getTimezone(value[0]);
-    const timezoneEnd = value[1] == null || !utils.isValid(value[1]) ? null : utils.getTimezone(value[1]);
+    const timezoneStart = utils.isValid(value[0]) ? utils.getTimezone(value[0]) : null;
+    const timezoneEnd = utils.isValid(value[1]) ? utils.getTimezone(value[1]) : null;
     if (timezoneStart != null && timezoneEnd != null && timezoneStart !== timezoneEnd) {
       throw new Error('MUI X: The timezone of the start and the end date should be the same.');
     }
@@ -39,8 +39,8 @@ export const getRangeFieldValueManager = ({
   dateSeparator = '–'
 }) => ({
   updateReferenceValue: (utils, value, prevReferenceValue) => {
-    const shouldKeepStartDate = value[0] != null && utils.isValid(value[0]);
-    const shouldKeepEndDate = value[1] != null && utils.isValid(value[1]);
+    const shouldKeepStartDate = utils.isValid(value[0]);
+    const shouldKeepEndDate = utils.isValid(value[1]);
     if (!shouldKeepStartDate && !shouldKeepEndDate) {
       return prevReferenceValue;
     }
@@ -111,7 +111,7 @@ export const getRangeFieldValueManager = ({
       },
       getNewValuesFromNewActiveDate: newActiveDate => ({
         value: updateDateInRange(newActiveDate, state.value),
-        referenceValue: newActiveDate == null || !utils.isValid(newActiveDate) ? state.referenceValue : updateDateInRange(newActiveDate, state.referenceValue)
+        referenceValue: !utils.isValid(newActiveDate) ? state.referenceValue : updateDateInRange(newActiveDate, state.referenceValue)
       })
     };
   }

package/managers/index.d.ts

@@ -0,0 +1,6 @@
+export { useDateRangeManager } from './useDateRangeManager';
+export type { UseDateRangeManagerReturnValue, UseDateRangeManagerParameters, } from './useDateRangeManager';
+export { useTimeRangeManager } from './useTimeRangeManager';
+export type { UseTimeRangeManagerReturnValue, UseTimeRangeManagerParameters, } from './useTimeRangeManager';
+export { useDateTimeRangeManager } from './useDateTimeRangeManager';
+export type { UseDateTimeRangeManagerReturnValue, UseDateTimeRangeManagerParameters, } from './useDateTimeRangeManager';

package/managers/index.js

@@ -0,0 +1,3 @@
+export { useDateRangeManager } from "./useDateRangeManager.js";
+export { useTimeRangeManager } from "./useTimeRangeManager.js";
+export { useDateTimeRangeManager } from "./useDateTimeRangeManager.js";

package/managers/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/managers/index.js",
+  "types": "./index.d.ts"
+}

package/managers/useDateRangeManager.d.ts

@@ -0,0 +1,15 @@
+import type { MakeOptional } from '@mui/x-internals/types';
+import { PickerManager } from '@mui/x-date-pickers/models';
+import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { DateRangeValidationError, RangeFieldSeparatorProps } from '../models';
+import { ExportedValidateDateRangeProps, ValidateDateRangeProps } from '../validation/validateDateRange';
+export declare function useDateRangeManager<TEnableAccessibleFieldDOMStructure extends boolean = true>(parameters?: UseDateRangeManagerParameters<TEnableAccessibleFieldDOMStructure>): UseDateRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure>;
+export interface UseDateRangeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> extends RangeFieldSeparatorProps {
+    enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
+}
+export type UseDateRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError, DateRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>, DateRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure>>;
+interface DateRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, 'format'>, RangeFieldSeparatorProps, ExportedValidateDateRangeProps {
+}
+interface DateRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure extends boolean> extends UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, ValidateDateRangeProps, RangeFieldSeparatorProps {
+}
+export {};

package/managers/useDateRangeManager.js

@@ -0,0 +1,31 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getDateFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
+import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
+import { validateDateRange } from "../validation/index.js";
+export function useDateRangeManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true,
+    dateSeparator
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'date',
+    validator: validateDateRange,
+    internal_valueManager: rangeValueManager,
+    internal_fieldValueManager: getRangeFieldValueManager({
+      dateSeparator
+    }),
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_applyDefaultsToFieldInternalProps: ({
+      internalProps,
+      utils,
+      defaultDates
+    }) => _extends({}, internalProps, getDateFieldInternalPropsDefaults({
+      defaultDates,
+      utils,
+      internalProps
+    }))
+  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}

package/managers/useDateTimeRangeManager.d.ts

@@ -0,0 +1,15 @@
+import type { MakeOptional } from '@mui/x-internals/types';
+import { PickerManager } from '@mui/x-date-pickers/models';
+import { AmPmProps, PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { DateTimeRangeValidationError, RangeFieldSeparatorProps } from '../models';
+import { ExportedValidateDateTimeRangeProps, ValidateDateTimeRangeProps } from '../validation/validateDateTimeRange';
+export declare function useDateTimeRangeManager<TEnableAccessibleFieldDOMStructure extends boolean = true>(parameters?: UseDateTimeRangeManagerParameters<TEnableAccessibleFieldDOMStructure>): UseDateTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure>;
+export interface UseDateTimeRangeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> extends RangeFieldSeparatorProps {
+    enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
+}
+export type UseDateTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError, DateTimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>, DateTimeRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure>>;
+interface DateTimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, 'format'>, ExportedValidateDateTimeRangeProps, AmPmProps, RangeFieldSeparatorProps {
+}
+interface DateTimeRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure extends boolean> extends UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, ValidateDateTimeRangeProps, RangeFieldSeparatorProps {
+}
+export {};

package/managers/useDateTimeRangeManager.js

@@ -0,0 +1,31 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getDateTimeFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
+import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
+import { validateDateTimeRange } from "../validation/index.js";
+export function useDateTimeRangeManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true,
+    dateSeparator
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'date-time',
+    validator: validateDateTimeRange,
+    internal_valueManager: rangeValueManager,
+    internal_fieldValueManager: getRangeFieldValueManager({
+      dateSeparator
+    }),
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_applyDefaultsToFieldInternalProps: ({
+      internalProps,
+      utils,
+      defaultDates
+    }) => _extends({}, internalProps, getDateTimeFieldInternalPropsDefaults({
+      internalProps,
+      utils,
+      defaultDates
+    }))
+  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}

package/managers/useTimeRangeManager.d.ts

@@ -0,0 +1,15 @@
+import type { MakeOptional } from '@mui/x-internals/types';
+import { PickerManager } from '@mui/x-date-pickers/models';
+import { AmPmProps, PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { TimeRangeValidationError, RangeFieldSeparatorProps } from '../models';
+import { ExportedValidateTimeRangeProps, ValidateTimeRangeProps } from '../validation/validateTimeRange';
+export declare function useTimeRangeManager<TEnableAccessibleFieldDOMStructure extends boolean = true>(parameters?: UseTimeRangeManagerParameters<TEnableAccessibleFieldDOMStructure>): UseTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure>;
+export interface UseTimeRangeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> extends RangeFieldSeparatorProps {
+    enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
+}
+export type UseTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError, TimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>, TimeRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure>>;
+interface TimeRangeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, 'format'>, ExportedValidateTimeRangeProps, AmPmProps, RangeFieldSeparatorProps {
+}
+interface TimeRangeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure extends boolean> extends UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, ValidateTimeRangeProps {
+}
+export {};

package/managers/useTimeRangeManager.js

@@ -0,0 +1,29 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getTimeFieldInternalPropsDefaults } from '@mui/x-date-pickers/internals';
+import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
+import { validateTimeRange } from "../validation/index.js";
+export function useTimeRangeManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true,
+    dateSeparator
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'time',
+    validator: validateTimeRange,
+    internal_valueManager: rangeValueManager,
+    internal_fieldValueManager: getRangeFieldValueManager({
+      dateSeparator
+    }),
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_applyDefaultsToFieldInternalProps: ({
+      internalProps,
+      utils
+    }) => _extends({}, internalProps, getTimeFieldInternalPropsDefaults({
+      utils,
+      internalProps
+    }))
+  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}

package/models/range.d.ts

@@ -1,3 +1,2 @@
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 export type DateRange<TDate extends PickerValidDate> = [TDate | null, TDate | null];
-export type NonEmptyDateRange = [PickerValidDate, PickerValidDate];

package/modern/{AdapterDateFnsJalaliV3 → AdapterDateFnsJalaliV2}/index.js

@@ -1 +1 @@
-export { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV3';
+export { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV2';

package/modern/{AdapterDateFnsV3 → AdapterDateFnsV2}/index.js

@@ -1 +1 @@
-export { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+export { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV2';

package/modern/DateRangeCalendar/DateRangeCalendar.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', {
@@ -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,
@@ -161,6 +162,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       onViewChange
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rangePositionContext = useNullablePickerRangePositionContext();
   const {
     value,
     handleValueChange,
@@ -192,9 +194,9 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     rangePosition,
     onRangePositionChange
   } = useRangePosition({
-    rangePosition: rangePositionProp,
-    defaultRangePosition: inDefaultRangePosition,
-    onRangePositionChange: inOnRangePositionChange
+    rangePosition: rangePositionProp ?? rangePositionContext?.rangePosition,
+    defaultRangePosition: defaultRangePositionProp,
+    onRangePositionChange: onRangePositionChangeProp ?? rangePositionContext?.onRangePositionChange
   });
   const handleDatePositionChange = useEventCallback(position => {
     if (rangePosition !== position) {
@@ -228,7 +230,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,
@@ -316,7 +318,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   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];

package/modern/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,

package/modern/DateRangePicker/DateRangePickerToolbar.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["value", "rangePosition", "onRangePositionChange", "toolbarFormat", "className", "classes"];
+const _excluded = ["toolbarFormat", "className", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -10,8 +10,9 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { PickersToolbar, PickersToolbarButton, useUtils, useToolbarOwnerState } from '@mui/x-date-pickers/internals';
-import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
+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 = classes => {
   const slots = {
@@ -49,38 +50,48 @@ const DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateRangeP
     name: 'MuiDateRangePickerToolbar'
   });
   const {
-      value: [start, end],
-      rangePosition,
-      onRangePositionChange,
-      toolbarFormat,
+      toolbarFormat: toolbarFormatProp,
       className,
       classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    value
+  } = usePickerContext();
   const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
+  const {
+    rangePosition,
+    onRangePositionChange
+  } = usePickerRangePositionContext();
   const classes = useUtilityClasses(classesProp);
-  const startDateValue = start ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate) : translations.start;
-  const endDateValue = end ? utils.formatByString(end, toolbarFormat || utils.formats.shortDate) : translations.end;
+
+  // 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')
       }), /*#__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')
       })]
@@ -102,8 +113,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    * @default `true` for Desktop, `false` for Mobile.
    */
   hidden: PropTypes.bool,
-  onRangePositionChange: PropTypes.func.isRequired,
-  rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -117,7 +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
+  toolbarPlaceholder: PropTypes.node
 } : void 0;
 export { DateRangePickerToolbar };

package/modern/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,
   /**

package/modern/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -12,6 +12,7 @@ import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hoo
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
 import { getDateTimeRangePickerTabsUtilityClass } from "./dateTimeRangePickerTabsClasses.js";
+import { usePickerRangePositionContext } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const viewToTab = (view, rangePosition) => {
   if (isDatePickerView(view)) {
@@ -71,8 +72,6 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     dateIcon = /*#__PURE__*/_jsx(DateRangeIcon, {}),
     timeIcon = /*#__PURE__*/_jsx(TimeIcon, {}),
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
-    rangePosition,
-    onRangePositionChange,
     className,
     classes: classesProp,
     sx
@@ -83,9 +82,13 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
   } = usePickerPrivateContext();
   const {
     view,
-    onViewChange
+    setView
   } = usePickerContext();
   const classes = useUtilityClasses(classesProp);
+  const {
+    rangePosition,
+    onRangePositionChange
+  } = usePickerRangePositionContext();
   const value = React.useMemo(() => view == null ? null : viewToTab(view, rangePosition), [view, rangePosition]);
   const isPreviousHidden = value === 'start-date';
   const isNextHidden = value === 'end-time';
@@ -112,12 +115,12 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
   });
   const changeToPreviousTab = useEventCallback(() => {
     const previousTab = value == null ? tabOptions[0] : tabOptions[tabOptions.indexOf(value) - 1];
-    onViewChange(tabToView(previousTab));
+    setView(tabToView(previousTab));
     handleRangePositionChange(previousTab);
   });
   const changeToNextTab = useEventCallback(() => {
     const nextTab = value == null ? tabOptions[0] : tabOptions[tabOptions.indexOf(value) + 1];
-    onViewChange(tabToView(nextTab));
+    setView(tabToView(nextTab));
     handleRangePositionChange(nextTab);
   });
   if (hidden) {
@@ -177,8 +180,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerTabs.propTypes = {
    * @default `window.innerHeight < 667` for `DesktopDateTimeRangePicker` and `MobileDateTimeRangePicker`
    */
   hidden: PropTypes.bool,
-  onRangePositionChange: PropTypes.func.isRequired,
-  rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js

@@ -1,17 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["rangePosition", "onRangePositionChange", "viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className"];
+const _excluded = ["viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className"];
 import { isInternalTimeView, useUtils } from '@mui/x-date-pickers/internals';
 import { isRangeValid } from "../internals/utils/date-utils.js";
 import { calculateRangeChange } from "../internals/utils/date-range-manager.js";
+import { usePickerRangePositionContext } from "../hooks/index.js";
 /**
  * @ignore - internal component.
  */
-function DateTimeRangePickerTimeWrapper(props, ref) {
+function DateTimeRangePickerTimeWrapper(props) {
   const utils = useUtils();
   const {
-      rangePosition,
-      onRangePositionChange,
       viewRenderer,
       value,
       onChange,
@@ -20,6 +19,10 @@ function DateTimeRangePickerTimeWrapper(props, ref) {
       views
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    rangePosition,
+    onRangePositionChange
+  } = usePickerRangePositionContext();
   if (!viewRenderer) {
     return null;
   }
@@ -47,7 +50,6 @@ function DateTimeRangePickerTimeWrapper(props, ref) {
     onChange(newRange, isFullRangeSelected ? 'finish' : 'partial', selectedView);
   };
   return viewRenderer(_extends({}, other, {
-    ref,
     views,
     onViewChange,
     value: currentValue,