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

package/modern/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js

@@ -0,0 +1,133 @@
+'use client';
+
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["slots", "slotProps", "className", "classes"];
+import * as React from 'react';
+import clsx from 'clsx';
+import Stack from '@mui/material/Stack';
+import MuiTextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import { styled, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import useSlotProps from '@mui/utils/useSlotProps';
+import { cleanFieldResponse, useFieldOwnerState } from '@mui/x-date-pickers/internals';
+import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
+import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
+import { useMultiInputRangeField } from "../../../hooks/useMultiInputRangeField/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function createMultiInputRangeField({
+  useManager,
+  name,
+  getUtilityClass
+}) {
+  const useUtilityClasses = classes => {
+    const slots = {
+      root: ['root'],
+      separator: ['separator']
+    };
+    return composeClasses(slots, getUtilityClass, classes);
+  };
+  const MultiInputRangeFieldRoot = styled(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Stack, _extends({
+    ref: ref,
+    spacing: 2,
+    direction: "row",
+    alignItems: "center"
+  }, props))), {
+    name,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+  })({});
+  const MultiInputRangeFieldSeparator = styled(Typography, {
+    name,
+    slot: 'Separator',
+    overridesResolver: (props, styles) => styles.separator
+  })({
+    lineHeight: '1.4375em' // 23px
+  });
+  const MultiInputRangeField = /*#__PURE__*/React.forwardRef(function MultiInputRangeField(props, ref) {
+    const themeProps = useThemeProps({
+      props,
+      // eslint-disable-next-line material-ui/mui-name-matches-component-name
+      name
+    });
+    const manager = useManager({
+      enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure,
+      dateSeparator: props.dateSeparator
+    });
+    const {
+      internalProps,
+      forwardedProps
+    } = useSplitFieldProps(themeProps, manager.valueType);
+    const {
+        slots,
+        slotProps,
+        className,
+        classes: classesProp
+      } = forwardedProps,
+      otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
+    const classes = useUtilityClasses(classesProp);
+    const ownerState = useFieldOwnerState(internalProps);
+    const Root = slots?.root ?? MultiInputRangeFieldRoot;
+    const rootProps = useSlotProps({
+      elementType: Root,
+      externalSlotProps: slotProps?.root,
+      externalForwardedProps: otherForwardedProps,
+      additionalProps: {
+        ref
+      },
+      ownerState,
+      className: clsx(className, classes.root)
+    });
+    const startTextFieldProps = useSlotProps({
+      elementType: PickersTextField,
+      externalSlotProps: slotProps?.textField,
+      ownerState: _extends({}, ownerState, {
+        position: 'start'
+      })
+    });
+    const endTextFieldProps = useSlotProps({
+      elementType: PickersTextField,
+      externalSlotProps: slotProps?.textField,
+      ownerState: _extends({}, ownerState, {
+        position: 'end'
+      })
+    });
+    const {
+      startDate,
+      endDate,
+      enableAccessibleFieldDOMStructure
+    } = useMultiInputRangeField({
+      manager,
+      internalProps,
+      startForwardedProps: startTextFieldProps,
+      endForwardedProps: endTextFieldProps
+    });
+    const Separator = slots?.separator ?? MultiInputRangeFieldSeparator;
+    const separatorProps = useSlotProps({
+      elementType: Separator,
+      externalSlotProps: slotProps?.separator,
+      additionalProps: {
+        children: internalProps.dateSeparator ?? '–'
+      },
+      ownerState,
+      className: classes.separator
+    });
+    const {
+      textFieldProps: startDateProps
+    } = cleanFieldResponse(startDate);
+    const {
+      textFieldProps: endDateProps
+    } = cleanFieldResponse(endDate);
+    const TextField = slots?.textField ?? (enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
+    return /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
+      children: [/*#__PURE__*/_jsx(TextField, _extends({
+        fullWidth: true
+      }, startDateProps)), /*#__PURE__*/_jsx(Separator, _extends({}, separatorProps)), /*#__PURE__*/_jsx(TextField, _extends({
+        fullWidth: true
+      }, endDateProps))]
+    }));
+  });
+  MultiInputRangeField.fieldType = 'multi-input';
+  return MultiInputRangeField;
+}

package/modern/internals/utils/createMultiInputRangeField/index.js

@@ -0,0 +1,2 @@
+export { createMultiInputRangeField } from "./createMultiInputRangeField.js";
+export { useMultiInputRangeField as unstable_useMultiInputRangeField } from "../../../hooks/useMultiInputRangeField/useMultiInputRangeField.js";

package/modern/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/modern/internals/utils/releaseInfo.js

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

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

package/modern/managers/useDateRangeManager.js

@@ -0,0 +1,33 @@
+'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
+    })),
+    // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
+    internal_getOpenPickerButtonAriaLabel: () => ''
+  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}

package/modern/managers/useDateTimeRangeManager.js

@@ -0,0 +1,33 @@
+'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
+    })),
+    // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
+    internal_getOpenPickerButtonAriaLabel: () => ''
+  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}

package/modern/managers/useTimeRangeManager.js

@@ -0,0 +1,31 @@
+'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
+    })),
+    // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
+    internal_getOpenPickerButtonAriaLabel: () => ''
+  }), [enableAccessibleFieldDOMStructure, dateSeparator]);
+}

package/modern/models/index.js

@@ -1,6 +1,4 @@
-export * from "./dateRange.js";
 export * from "./fields.js";
 export * from "./range.js";
 export * from "./validation.js";
-export * from "./multiInputRangeFieldClasses.js";
 export {};

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

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "AdapterDateFnsJalali", {
     return _AdapterDateFnsJalaliV.AdapterDateFnsJalali;
   }
 });
-var _AdapterDateFnsJalaliV = require("@mui/x-date-pickers/AdapterDateFnsJalaliV3");
+var _AdapterDateFnsJalaliV = require("@mui/x-date-pickers/AdapterDateFnsJalaliV2");

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

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "AdapterDateFns", {
     return _AdapterDateFnsV.AdapterDateFns;
   }
 });
-var _AdapterDateFnsV = require("@mui/x-date-pickers/AdapterDateFnsV3");
+var _AdapterDateFnsV = require("@mui/x-date-pickers/AdapterDateFnsV2");

package/node/DateRangeCalendar/DateRangeCalendar.js

@@ -32,6 +32,7 @@ var _useDragRange2 = require("./useDragRange");
 var _useRangePosition = require("../internals/hooks/useRangePosition");
 var _dimensions = require("../internals/constants/dimensions");
 var _PickersRangeCalendarHeader = require("../PickersRangeCalendarHeader");
+var _useNullablePickerRangePositionContext = require("../internals/hooks/useNullablePickerRangePositionContext");
 var _jsxRuntime = require("react/jsx-runtime");
 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"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
@@ -142,8 +143,8 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       reduceAnimations,
       onMonthChange,
       rangePosition: rangePositionProp,
-      defaultRangePosition: inDefaultRangePosition,
-      onRangePositionChange: inOnRangePositionChange,
+      defaultRangePosition: defaultRangePositionProp,
+      onRangePositionChange: onRangePositionChangeProp,
       calendars,
       currentMonthCalendarPosition = 1,
       slots,
@@ -168,6 +169,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       onViewChange
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rangePositionContext = (0, _useNullablePickerRangePositionContext.useNullablePickerRangePositionContext)();
   const {
     value,
     handleValueChange,
@@ -197,15 +199,15 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
   const id = (0, _useId.default)();
   const {
     rangePosition,
-    onRangePositionChange
+    setRangePosition
   } = (0, _useRangePosition.useRangePosition)({
-    rangePosition: rangePositionProp,
-    defaultRangePosition: inDefaultRangePosition,
-    onRangePositionChange: inOnRangePositionChange
+    rangePosition: rangePositionProp ?? rangePositionContext?.rangePosition,
+    defaultRangePosition: defaultRangePositionProp,
+    onRangePositionChange: onRangePositionChangeProp ?? rangePositionContext?.setRangePosition
   });
   const handleDatePositionChange = (0, _useEventCallback.default)(position => {
     if (rangePosition !== position) {
-      onRangePositionChange(position);
+      setRangePosition(position);
     }
   });
   const handleSelectedDayChange = (0, _useEventCallback.default)((newDate, selectionState, allowRangeFlip = false) => {
@@ -223,7 +225,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     });
     const isNextSectionAvailable = availableRangePositions.includes(nextSelection);
     if (isNextSectionAvailable) {
-      onRangePositionChange(nextSelection);
+      setRangePosition(nextSelection);
     }
     const isFullRangeSelected = rangePosition === 'end' && (0, _dateUtils.isRangeValid)(utils, newRange);
     setValueAndGoToNextView(newRange, isFullRangeSelected || !isNextSectionAvailable ? 'finish' : 'partial', view);
@@ -235,7 +237,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
 
   // 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 = (0, _useDragRange2.useDragRange)({
       disableDragEditing: shouldDisableDragEditing,
       onDrop: handleDrop,
@@ -323,7 +325,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
   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/node/DateRangePicker/DateRangePicker.js

@@ -70,7 +70,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   calendars: _propTypes.default.oneOf([1, 2, 3]),
   className: _propTypes.default.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.default.bool,

package/node/DateRangePicker/DateRangePickerToolbar.js

@@ -18,8 +18,9 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _internals = require("@mui/x-date-pickers/internals");
 var _hooks = require("@mui/x-date-pickers/hooks");
 var _dateRangePickerToolbarClasses = require("./dateRangePickerToolbarClasses");
+var _hooks2 = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value", "rangePosition", "onRangePositionChange", "toolbarFormat", "className", "classes"];
+const _excluded = ["toolbarFormat", "className", "classes"];
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
@@ -56,40 +57,50 @@ const DateRangePickerToolbar = exports.DateRangePickerToolbar = /*#__PURE__*/Rea
     name: 'MuiDateRangePickerToolbar'
   });
   const {
-      value: [start, end],
-      rangePosition,
-      onRangePositionChange,
-      toolbarFormat,
+      toolbarFormat: toolbarFormatProp,
       className,
       classes: classesProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    value
+  } = (0, _hooks.usePickerContext)();
   const translations = (0, _hooks.usePickerTranslations)();
   const ownerState = (0, _internals.useToolbarOwnerState)();
+  const {
+    rangePosition,
+    setRangePosition
+  } = (0, _hooks2.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__*/(0, _jsxRuntime.jsx)(DateRangePickerToolbarRoot, (0, _extends2.default)({}, other, {
     toolbarTitle: translations.dateRangePickerToolbarTitle,
-    isLandscape: false,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
     ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateRangePickerToolbarContainer, {
       className: classes.container,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.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__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
         variant: "h5",
         children: ["\xA0", '–', "\xA0"]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.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')
       })]
     })
   }));
@@ -109,8 +120,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    * @default `true` for Desktop, `false` for Mobile.
    */
   hidden: _propTypes.default.bool,
-  onRangePositionChange: _propTypes.default.func.isRequired,
-  rangePosition: _propTypes.default.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -124,6 +133,5 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    * Toolbar value placeholder—it is displayed when the value is empty.
    * @default "––"
    */
-  toolbarPlaceholder: _propTypes.default.node,
-  value: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
+  toolbarPlaceholder: _propTypes.default.node
 } : void 0;

package/node/DateTimeRangePicker/DateTimeRangePicker.js

@@ -75,8 +75,8 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   calendars: _propTypes.default.oneOf([1, 2, 3]),
   className: _propTypes.default.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.default.bool,
   /**

package/node/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -19,6 +19,7 @@ var _hooks = require("@mui/x-date-pickers/hooks");
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _dateTimeRangePickerTabsClasses = require("./dateTimeRangePickerTabsClasses");
+var _hooks2 = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const viewToTab = (view, rangePosition) => {
   if ((0, _internals.isDatePickerView)(view)) {
@@ -78,8 +79,6 @@ const DateTimeRangePickerTabs = exports.DateTimeRangePickerTabs = function DateT
     dateIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DateRangeIcon, {}),
     timeIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.TimeIcon, {}),
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
-    rangePosition,
-    onRangePositionChange,
     className,
     classes: classesProp,
     sx
@@ -90,9 +89,13 @@ const DateTimeRangePickerTabs = exports.DateTimeRangePickerTabs = function DateT
   } = (0, _internals.usePickerPrivateContext)();
   const {
     view,
-    onViewChange
+    setView
   } = (0, _hooks.usePickerContext)();
   const classes = useUtilityClasses(classesProp);
+  const {
+    rangePosition,
+    setRangePosition
+  } = (0, _hooks2.usePickerRangePositionContext)();
   const value = React.useMemo(() => view == null ? null : viewToTab(view, rangePosition), [view, rangePosition]);
   const isPreviousHidden = value === 'start-date';
   const isNextHidden = value === 'end-time';
@@ -112,19 +115,19 @@ const DateTimeRangePickerTabs = exports.DateTimeRangePickerTabs = function DateT
   }, [translations.endDate, translations.endTime, translations.startDate, translations.startTime, value]);
   const handleRangePositionChange = (0, _useEventCallback.default)(newTab => {
     if (newTab.includes('start')) {
-      onRangePositionChange('start');
+      setRangePosition('start');
     } else {
-      onRangePositionChange('end');
+      setRangePosition('end');
     }
   });
   const changeToPreviousTab = (0, _useEventCallback.default)(() => {
     const previousTab = value == null ? tabOptions[0] : tabOptions[tabOptions.indexOf(value) - 1];
-    onViewChange(tabToView(previousTab));
+    setView(tabToView(previousTab));
     handleRangePositionChange(previousTab);
   });
   const changeToNextTab = (0, _useEventCallback.default)(() => {
     const nextTab = value == null ? tabOptions[0] : tabOptions[tabOptions.indexOf(value) + 1];
-    onViewChange(tabToView(nextTab));
+    setView(tabToView(nextTab));
     handleRangePositionChange(nextTab);
   });
   if (hidden) {
@@ -184,8 +187,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerTabs.propTypes = {
    * @default `window.innerHeight < 667` for `DesktopDateTimeRangePicker` and `MobileDateTimeRangePicker`
    */
   hidden: _propTypes.default.bool,
-  onRangePositionChange: _propTypes.default.func.isRequired,
-  rangePosition: _propTypes.default.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js

@@ -10,15 +10,14 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _internals = require("@mui/x-date-pickers/internals");
 var _dateUtils = require("../internals/utils/date-utils");
 var _dateRangeManager = require("../internals/utils/date-range-manager");
-const _excluded = ["rangePosition", "onRangePositionChange", "viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className"];
+var _hooks = require("../hooks");
+const _excluded = ["viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className"];
 /**
  * @ignore - internal component.
  */
-function DateTimeRangePickerTimeWrapper(props, ref) {
+function DateTimeRangePickerTimeWrapper(props) {
   const utils = (0, _internals.useUtils)();
   const {
-      rangePosition,
-      onRangePositionChange,
       viewRenderer,
       value,
       onChange,
@@ -27,6 +26,10 @@ function DateTimeRangePickerTimeWrapper(props, ref) {
       views
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    rangePosition,
+    setRangePosition
+  } = (0, _hooks.usePickerRangePositionContext)();
   if (!viewRenderer) {
     return null;
   }
@@ -49,12 +52,11 @@ function DateTimeRangePickerTimeWrapper(props, ref) {
     // reset view to the first time view and swap range position after selecting the last time view (start or end position)
     if (selectedView === timeViews[timeViews.length - 1] && onViewChange) {
       onViewChange(views[0]);
-      onRangePositionChange(rangePosition === 'start' ? 'end' : 'start');
+      setRangePosition(rangePosition === 'start' ? 'end' : 'start');
     }
     onChange(newRange, isFullRangeSelected ? 'finish' : 'partial', selectedView);
   };
   return viewRenderer((0, _extends2.default)({}, other, {
-    ref,
     views,
     onViewChange,
     value: currentValue,