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

package/modern/DateTimeRangePicker/DateTimeRangePickerToolbar.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", "className", "classes", "onChange", "classes", "isLandscape", "ampm", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
+const _excluded = ["className", "classes", "classes", "ampm", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -13,6 +13,7 @@ import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hoo
 import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
 import { getDateTimeRangePickerToolbarUtilityClass } from "./dateTimeRangePickerToolbarClasses.js";
 import { calculateRangeChange } from "../internals/utils/date-range-manager.js";
+import { usePickerRangePositionContext } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = classes => {
   const slots = {
@@ -50,13 +51,8 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
   });
   const utils = useUtils();
   const {
-      value: [start, end],
-      rangePosition,
-      onRangePositionChange,
       className,
       classes: classesProp,
-      onChange,
-      isLandscape,
       ampm,
       hidden,
       toolbarFormat,
@@ -66,17 +62,22 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
+    value,
+    setValue,
     disabled,
     readOnly,
     view,
-    onViewChange,
+    setView,
     views
   } = usePickerContext();
   const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
+  const {
+    rangePosition,
+    onRangePositionChange
+  } = usePickerRangePositionContext();
   const classes = useUtilityClasses(classesProp);
   const commonToolbarProps = {
-    isLandscape,
     views,
     ampm,
     disabled,
@@ -85,20 +86,22 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     toolbarFormat,
     toolbarPlaceholder
   };
-  const handleOnChange = React.useCallback(newDate => {
+  const wrappedSetValue = React.useCallback(newDate => {
     const {
       nextSelection,
       newRange
     } = calculateRangeChange({
       newDate,
       utils,
-      range: props.value,
+      range: value,
       rangePosition,
       allowRangeFlip: true
     });
     onRangePositionChange(nextSelection);
-    onChange(newRange);
-  }, [onChange, onRangePositionChange, props.value, rangePosition, utils]);
+    setValue(newRange, {
+      changeImportance: 'set'
+    });
+  }, [setValue, onRangePositionChange, value, rangePosition, utils]);
   const startOverrides = React.useMemo(() => {
     const handleStartRangeViewChange = newView => {
       if (newView === 'year' || newView === 'month') {
@@ -107,14 +110,16 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
       if (rangePosition !== 'start') {
         onRangePositionChange('start');
       }
-      onViewChange(newView);
+      setView(newView);
     };
     return {
+      value: value[0],
+      setValue: wrappedSetValue,
       forceDesktopVariant: true,
-      onViewChange: handleStartRangeViewChange,
+      setView: handleStartRangeViewChange,
       view: rangePosition === 'start' ? view : null
     };
-  }, [rangePosition, view, onRangePositionChange, onViewChange]);
+  }, [value, wrappedSetValue, rangePosition, view, onRangePositionChange, setView]);
   const endOverrides = React.useMemo(() => {
     const handleEndRangeViewChange = newView => {
       if (newView === 'year' || newView === 'month') {
@@ -123,14 +128,16 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
       if (rangePosition !== 'end') {
         onRangePositionChange('end');
       }
-      onViewChange(newView);
+      setView(newView);
     };
     return {
+      value: value[1],
+      setValue: wrappedSetValue,
       forceDesktopVariant: true,
-      onViewChange: handleEndRangeViewChange,
+      setView: handleEndRangeViewChange,
       view: rangePosition === 'end' ? view : null
     };
-  }, [rangePosition, view, onRangePositionChange, onViewChange]);
+  }, [value, wrappedSetValue, rangePosition, view, onRangePositionChange, setView]);
   if (hidden) {
     return null;
   }
@@ -143,21 +150,17 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     children: [/*#__PURE__*/_jsx(DateTimePickerToolbarOverrideContext.Provider, {
       value: startOverrides,
       children: /*#__PURE__*/_jsx(DateTimeRangePickerToolbarStart, _extends({
-        value: start,
         toolbarTitle: translations.start,
         ownerState: ownerState,
         className: classes.startToolbar,
-        onChange: handleOnChange,
         titleId: titleId ? `${titleId}-start-toolbar` : undefined
       }, commonToolbarProps))
     }), /*#__PURE__*/_jsx(DateTimePickerToolbarOverrideContext.Provider, {
       value: endOverrides,
       children: /*#__PURE__*/_jsx(DateTimeRangePickerToolbarEnd, _extends({
-        value: end,
         toolbarTitle: translations.end,
         ownerState: ownerState,
         className: classes.endToolbar,
-        onChange: handleOnChange,
         titleId: titleId ? `${titleId}-end-toolbar` : undefined
       }, commonToolbarProps))
     })]
@@ -179,10 +182,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
    * @default `true` for Desktop, `false` for Mobile.
    */
   hidden: PropTypes.bool,
-  isLandscape: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onRangePositionChange: PropTypes.func.isRequired,
-  rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -196,7 +195,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.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 { DateTimeRangePickerToolbar };

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -13,6 +13,8 @@ import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js"
 import { MultiInputDateRangeField } from "../MultiInputDateRangeField/index.js";
 import { useDesktopRangePicker } from "../internals/hooks/useDesktopRangePicker/index.js";
 import { validateDateRange } from "../validation/index.js";
+const emptyActions = [];
+
 /**
  * Demos:
  *
@@ -32,6 +34,7 @@ const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDat
     day: renderDateRangeViewCalendar
   }, defaultizedProps.viewRenderers);
   const props = _extends({}, defaultizedProps, {
+    closeOnSelect: defaultizedProps.closeOnSelect ?? true,
     viewRenderers,
     format: utils.formats.keyboardDate,
     calendars: defaultizedProps.calendars ?? 2,
@@ -46,7 +49,10 @@ const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDat
       }),
       toolbar: _extends({
         hidden: true
-      }, defaultizedProps.slotProps?.toolbar)
+      }, defaultizedProps.slotProps?.toolbar),
+      actionBar: ownerState => _extends({
+        actions: emptyActions
+      }, resolveComponentProps(defaultizedProps.slotProps?.actionBar, ownerState))
     })
   });
   const {
@@ -78,8 +84,8 @@ DesktopDateRangePicker.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 true
    */
   closeOnSelect: PropTypes.bool,
   /**

package/modern/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["openTo", "rangePosition"];
+const _excluded = ["openTo"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { isDatePickerView, isInternalTimeView, resolveDateTimeFormat, useUtils } from '@mui/x-date-pickers/internals';
@@ -22,15 +22,22 @@ import { useDateTimeRangePickerDefaultizedProps } from "../DateTimeRangePicker/s
 import { MultiInputDateTimeRangeField } from "../MultiInputDateTimeRangeField/index.js";
 import { DateTimeRangePickerTimeWrapper } from "../DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js";
 import { RANGE_VIEW_HEIGHT } from "../internals/constants/dimensions.js";
+import { usePickerRangePositionContext } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const rendererInterceptor = function rendererInterceptor(inViewRenderers, popperView, rendererProps) {
+const rendererInterceptor = function RendererInterceptor(props) {
   const {
-      openTo,
-      rangePosition
+    viewRenderers,
+    popperView,
+    rendererProps
+  } = props;
+  const {
+      openTo
     } = rendererProps,
     otherProps = _objectWithoutPropertiesLoose(rendererProps, _excluded);
+  const {
+    rangePosition
+  } = usePickerRangePositionContext();
   const finalProps = _extends({}, otherProps, {
-    rangePosition,
     focusedView: null,
     sx: [{
       [`&.${multiSectionDigitalClockClasses.root}`]: {
@@ -43,7 +50,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
   });
   const isTimeViewActive = isInternalTimeView(popperView);
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [inViewRenderers.day?.(_extends({}, rendererProps, {
+    children: [viewRenderers.day?.(_extends({}, rendererProps, {
       availableRangePositions: [rangePosition],
       view: !isTimeViewActive ? popperView : 'day',
       views: rendererProps.views.filter(isDatePickerView),
@@ -59,7 +66,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
       view: isTimeViewActive ? popperView : 'hours',
       views: finalProps.views.filter(isInternalTimeView),
       openTo: isInternalTimeView(openTo) ? openTo : 'hours',
-      viewRenderer: inViewRenderers[isTimeViewActive ? popperView : 'hours'],
+      viewRenderer: viewRenderers[isTimeViewActive ? popperView : 'hours'],
       sx: [{
         gridColumn: 3
       }, ...finalProps.sx]
@@ -92,7 +99,6 @@ const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
   // Need to avoid adding the `meridiem` view when unexpected renderer is specified
   const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name;
   const views = !shouldHoursRendererContainMeridiemView ? defaultizedProps.views.filter(view => view !== 'meridiem') : defaultizedProps.views;
-  const actionBarActions = defaultizedProps.shouldRenderTimeInASingleColumn ? [] : ['accept'];
   const props = _extends({}, defaultizedProps, {
     views,
     viewRenderers,
@@ -113,10 +119,7 @@ const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
       }, defaultizedProps.slotProps?.tabs),
       toolbar: _extends({
         hidden: true
-      }, defaultizedProps.slotProps?.toolbar),
-      actionBar: ownerState => _extends({
-        actions: actionBarActions
-      }, resolveComponentProps(defaultizedProps.slotProps?.actionBar, ownerState))
+      }, defaultizedProps.slotProps?.toolbar)
     })
   });
   const {
@@ -154,8 +157,8 @@ DesktopDateTimeRangePicker.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/MobileDateRangePicker/MobileDateRangePicker.js

@@ -74,8 +74,8 @@ MobileDateRangePicker.propTypes = {
   autoFocus: PropTypes.bool,
   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/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["view", "openTo", "rangePosition"];
+const _excluded = ["view", "openTo"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
@@ -20,16 +20,23 @@ import { useDateTimeRangePickerDefaultizedProps } from "../DateTimeRangePicker/s
 import { MultiInputDateTimeRangeField } from "../MultiInputDateTimeRangeField/index.js";
 import { DateTimeRangePickerTimeWrapper } from "../DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js";
 import { RANGE_VIEW_HEIGHT } from "../internals/constants/dimensions.js";
+import { usePickerRangePositionContext } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const rendererInterceptor = function rendererInterceptor(inViewRenderers, popperView, rendererProps) {
+const rendererInterceptor = function RendererInterceptor(props) {
+  const {
+    viewRenderers,
+    popperView,
+    rendererProps
+  } = props;
+  const {
+    rangePosition
+  } = usePickerRangePositionContext();
   const {
       view,
-      openTo,
-      rangePosition
+      openTo
     } = rendererProps,
     otherRendererProps = _objectWithoutPropertiesLoose(rendererProps, _excluded);
   const finalProps = _extends({}, otherRendererProps, {
-    rangePosition,
     focusedView: null,
     sx: [{
       width: DIALOG_WIDTH,
@@ -53,7 +60,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
     }]
   });
   const isTimeView = isInternalTimeView(popperView);
-  const viewRenderer = inViewRenderers[popperView];
+  const viewRenderer = viewRenderers[popperView];
   if (!viewRenderer) {
     return null;
   }
@@ -148,8 +155,8 @@ MobileDateTimeRangePicker.propTypes = {
   autoFocus: PropTypes.bool,
   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/SingleInputDateRangeField/useSingleInputDateRangeField.js

@@ -1,25 +1,24 @@
 'use client';
 
-import * as React from 'react';
-import { useField, useDefaultizedDateField } from '@mui/x-date-pickers/internals';
+import { useField, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals';
 import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
-import { rangeValueManager, getRangeFieldValueManager } from "../internals/utils/valueManagers.js";
-import { validateDateRange } from "../validation/index.js";
-export const useSingleInputDateRangeField = inProps => {
-  const props = useDefaultizedDateField(inProps);
+import { useDateRangeManager } from "../managers/index.js";
+export const useSingleInputDateRangeField = props => {
+  const manager = useDateRangeManager(props);
   const {
     forwardedProps,
     internalProps
   } = useSplitFieldProps(props, 'date');
-  const fieldValueManager = React.useMemo(() => getRangeFieldValueManager({
-    dateSeparator: internalProps.dateSeparator
-  }), [internalProps.dateSeparator]);
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps
+  });
   return useField({
     forwardedProps,
-    internalProps,
-    valueManager: rangeValueManager,
-    fieldValueManager,
-    validator: validateDateRange,
-    valueType: 'date'
+    internalProps: internalPropsWithDefaults,
+    valueManager: manager.internal_valueManager,
+    fieldValueManager: manager.internal_fieldValueManager,
+    validator: manager.validator,
+    valueType: manager.valueType
   });
 };

package/modern/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js

@@ -1,25 +1,24 @@
 'use client';
 
-import * as React from 'react';
-import { useField, useDefaultizedDateTimeField } from '@mui/x-date-pickers/internals';
+import { useField, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals';
 import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
-import { rangeValueManager, getRangeFieldValueManager } from "../internals/utils/valueManagers.js";
-import { validateDateTimeRange } from "../validation/index.js";
-export const useSingleInputDateTimeRangeField = inProps => {
-  const props = useDefaultizedDateTimeField(inProps);
+import { useDateTimeRangeManager } from "../managers/index.js";
+export const useSingleInputDateTimeRangeField = props => {
+  const manager = useDateTimeRangeManager(props);
   const {
     forwardedProps,
     internalProps
   } = useSplitFieldProps(props, 'date-time');
-  const fieldValueManager = React.useMemo(() => getRangeFieldValueManager({
-    dateSeparator: internalProps.dateSeparator
-  }), [internalProps.dateSeparator]);
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps
+  });
   return useField({
     forwardedProps,
-    internalProps,
-    valueManager: rangeValueManager,
-    fieldValueManager,
-    validator: validateDateTimeRange,
-    valueType: 'date-time'
+    internalProps: internalPropsWithDefaults,
+    valueManager: manager.internal_valueManager,
+    fieldValueManager: manager.internal_fieldValueManager,
+    validator: manager.validator,
+    valueType: manager.valueType
   });
 };

package/modern/SingleInputTimeRangeField/useSingleInputTimeRangeField.js

@@ -1,25 +1,24 @@
 'use client';
 
-import * as React from 'react';
-import { useField, useDefaultizedTimeField } from '@mui/x-date-pickers/internals';
+import { useField, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals';
 import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
-import { rangeValueManager, getRangeFieldValueManager } from "../internals/utils/valueManagers.js";
-import { validateTimeRange } from "../validation/index.js";
-export const useSingleInputTimeRangeField = inProps => {
-  const props = useDefaultizedTimeField(inProps);
+import { useTimeRangeManager } from "../managers/index.js";
+export const useSingleInputTimeRangeField = props => {
+  const manager = useTimeRangeManager(props);
   const {
     forwardedProps,
     internalProps
   } = useSplitFieldProps(props, 'time');
-  const fieldValueManager = React.useMemo(() => getRangeFieldValueManager({
-    dateSeparator: internalProps.dateSeparator
-  }), [internalProps.dateSeparator]);
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps
+  });
   return useField({
     forwardedProps,
-    internalProps,
-    valueManager: rangeValueManager,
-    fieldValueManager,
-    validator: validateTimeRange,
-    valueType: 'time'
+    internalProps: internalPropsWithDefaults,
+    valueManager: manager.internal_valueManager,
+    fieldValueManager: manager.internal_fieldValueManager,
+    validator: manager.validator,
+    valueType: manager.valueType
   });
 };

package/modern/dateRangeViewRenderers/dateRangeViewRenderers.js

@@ -19,9 +19,6 @@ export const renderDateRangeViewCalendar = ({
   shouldDisableDate,
   reduceAnimations,
   onMonthChange,
-  rangePosition,
-  defaultRangePosition,
-  onRangePositionChange,
   calendars,
   currentMonthCalendarPosition,
   slots,
@@ -58,9 +55,6 @@ export const renderDateRangeViewCalendar = ({
   shouldDisableDate: shouldDisableDate,
   reduceAnimations: reduceAnimations,
   onMonthChange: onMonthChange,
-  rangePosition: rangePosition,
-  defaultRangePosition: defaultRangePosition,
-  onRangePositionChange: onRangePositionChange,
   calendars: calendars,
   currentMonthCalendarPosition: currentMonthCalendarPosition,
   slots: slots,

package/modern/hooks/index.js

@@ -0,0 +1 @@
+export { usePickerRangePositionContext } from "./usePickerRangePositionContext.js";

package/modern/hooks/usePickerRangePositionContext.js

@@ -0,0 +1,15 @@
+'use client';
+
+import * as React from 'react';
+export const PickerRangePositionContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * Returns information about the range position of the picker that wraps the current component.
+ */
+export function usePickerRangePositionContext() {
+  const value = React.useContext(PickerRangePositionContext);
+  if (value == null) {
+    throw new Error(['MUI X: The `usePickerRangePositionContext` can only be called in components that are used inside a picker component'].join('\n'));
+  }
+  return value;
+}

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v8.0.0-alpha.6
+ * @mui/x-date-pickers-pro v8.0.0-alpha.7
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -32,4 +32,6 @@ export * from "./MobileDateTimeRangePicker/index.js";
 // View renderers
 export * from "./dateRangeViewRenderers/index.js";
 export * from "./models/index.js";
-export * from "./validation/index.js";
+export * from "./hooks/index.js";
+export * from "./validation/index.js";
+export * from "./managers/index.js";

package/modern/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -9,6 +9,7 @@ import { executeInTheNextEventLoopTick, getActiveElement, usePicker, PickersPopp
 import { useEnrichedRangePickerFieldProps } from "../useEnrichedRangePickerFieldProps.js";
 import { getReleaseInfo } from "../../utils/releaseInfo.js";
 import { useRangePosition } from "../useRangePosition.js";
+import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
 export const useDesktopRangePicker = _ref => {
@@ -46,20 +47,16 @@ export const useDesktopRangePicker = _ref => {
   const singleInputFieldRef = React.useRef(null);
   const initialView = React.useRef(props.openTo ?? null);
   const fieldType = slots.field.fieldType ?? 'multi-input';
-  const {
-    rangePosition,
-    onRangePositionChange
-  } = useRangePosition(props, fieldType === 'single-input' ? singleInputFieldRef : undefined);
+  const rangePositionResponse = useRangePosition(props, fieldType === 'single-input' ? singleInputFieldRef : undefined);
   let fieldRef;
   if (fieldType === 'single-input') {
     fieldRef = singleInputFieldRef;
-  } else if (rangePosition === 'start') {
+  } else if (rangePositionResponse.rangePosition === 'start') {
     fieldRef = startFieldRef;
   } else {
     fieldRef = endFieldRef;
   }
   const {
-    layoutProps,
     providerProps,
     renderCurrentView,
     shouldRestoreFocus,
@@ -70,11 +67,7 @@ export const useDesktopRangePicker = _ref => {
     variant: 'desktop',
     autoFocusView: false,
     fieldRef,
-    localeText,
-    additionalViewProps: {
-      rangePosition,
-      onRangePositionChange
-    }
+    localeText
   }));
   React.useEffect(() => {
     if (providerProps.contextValue.view) {
@@ -121,7 +114,7 @@ export const useDesktopRangePicker = _ref => {
     }),
     ownerState
   });
-  const enrichedFieldProps = useEnrichedRangePickerFieldProps({
+  const enrichedFieldProps = useEnrichedRangePickerFieldProps(_extends({
     variant: 'desktop',
     fieldType,
     // These direct access to `providerProps` will go away once the range fields handle the picker opening
@@ -132,8 +125,6 @@ export const useDesktopRangePicker = _ref => {
     label,
     localeText,
     onBlur: handleBlur,
-    rangePosition,
-    onRangePositionChange,
     pickerSlotProps: slotProps,
     pickerSlots: slots,
     fieldProps,
@@ -142,37 +133,29 @@ export const useDesktopRangePicker = _ref => {
     endFieldRef,
     singleInputFieldRef,
     currentView: providerProps.contextValue.view !== props.openTo ? providerProps.contextValue.view : undefined,
-    initialView: initialView.current ?? undefined,
-    onViewChange: providerProps.contextValue.onViewChange
-  });
-  const slotPropsForLayout = _extends({}, slotProps, {
-    tabs: _extends({}, slotProps?.tabs, {
-      rangePosition,
-      onRangePositionChange
-    }),
-    toolbar: _extends({}, slotProps?.toolbar, {
-      rangePosition,
-      onRangePositionChange
-    })
-  });
+    initialView: initialView.current ?? undefined
+  }, rangePositionResponse));
   const Layout = slots?.layout ?? PickersLayout;
-  const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
-    children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersPopper, {
-      role: "tooltip",
-      placement: "bottom-start",
-      containerRef: popperRef,
-      anchorEl: anchorRef.current,
-      onBlur: handleBlur,
-      slots: slots,
-      slotProps: slotProps,
-      shouldRestoreFocus: shouldRestoreFocus,
-      reduceAnimations: reduceAnimations,
-      children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
+  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
+    children: /*#__PURE__*/_jsxs(PickerRangePositionContext.Provider, {
+      value: rangePositionResponse,
+      children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersPopper, {
+        role: "tooltip",
+        placement: "bottom-start",
+        containerRef: popperRef,
+        anchorEl: anchorRef.current,
+        onBlur: handleBlur,
         slots: slots,
-        slotProps: slotPropsForLayout,
-        children: renderCurrentView()
-      }))
-    })]
+        slotProps: slotProps,
+        shouldRestoreFocus: shouldRestoreFocus,
+        reduceAnimations: reduceAnimations,
+        children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+          slots: slots,
+          slotProps: slotProps,
+          children: renderCurrentView()
+        }))
+      })]
+    })
   }));
   return {
     renderPicker