mui · flaviendelangle · Jan 15, 2025 · Jan 15, 2025 · Jan 15, 2025 · Jan 15, 2025
diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
@@ -690,7 +690,9 @@ If the updated values do not fit your use case, you can [override them](/x/react
   +const { rangePosition } = usePickerRangePositionContext();
 
   -const { onRangePositionChange } = props;
-  +const { onRangePositionChange } = usePickerRangePositionContext();
+  -onRangePositionChange('start');
+  +const { setRangePosition } = usePickerRangePositionContext();
+  +setRangePosition('start');
   ```
 
 ### Slot: `toolbar`
@@ -777,7 +779,9 @@ If the updated values do not fit your use case, you can [override them](/x/react
   +const { rangePosition } = usePickerRangePositionContext();
 
   -const { onRangePositionChange } = props;
-  +const { onRangePositionChange } = usePickerRangePositionContext();
+  -onRangePositionChange('start');
+  +const { setRangePosition } = usePickerRangePositionContext();
+  +setRangePosition('start');
   ```
 
 ### Slot: `tabs`
@@ -807,7 +811,9 @@ If the updated values do not fit your use case, you can [override them](/x/react
   +const { rangePosition } = usePickerRangePositionContext();
 
   -const { onRangePositionChange } = props;
-  +const { onRangePositionChange } = usePickerRangePositionContext();
+  -onRangePositionChange('start');
+  +const { setRangePosition } = usePickerRangePositionContext();
+  +setRangePosition('start');
   ```
 
 ### Slot: `actionBar`

diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
@@ -243,15 +243,15 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar(
   const now = useNow(timezone);
   const id = useId();
 
-  const { rangePosition, onRangePositionChange } = useRangePosition({
+  const { rangePosition, setRangePosition } = useRangePosition({
     rangePosition: rangePositionProp ?? rangePositionContext?.rangePosition,
     defaultRangePosition: defaultRangePositionProp,
-    onRangePositionChange: onRangePositionChangeProp ?? rangePositionContext?.onRangePositionChange,
+    onRangePositionChange: onRangePositionChangeProp ?? rangePositionContext?.setRangePosition,
   });
 
   const handleDatePositionChange = useEventCallback((position: RangePosition) => {
     if (rangePosition !== position) {
-      onRangePositionChange(position);
+      setRangePosition(position);
     }
   });
 
@@ -273,7 +273,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar(
 
       const isNextSectionAvailable = availableRangePositions.includes(nextSelection);
       if (isNextSectionAvailable) {
-        onRangePositionChange(nextSelection);
+        setRangePosition(nextSelection);
       }
 
       const isFullRangeSelected = rangePosition === 'end' && isRangeValid(utils, newRange);

diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
@@ -85,7 +85,7 @@ const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar(
   const { value } = usePickerContext<PickerRangeValue>();
   const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
-  const { rangePosition, onRangePositionChange } = usePickerRangePositionContext();
+  const { rangePosition, setRangePosition } = usePickerRangePositionContext();
   const classes = useUtilityClasses(classesProp);
 
   // This can't be a default value when spreading because it breaks the API generation.
@@ -112,14 +112,14 @@ const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar(
           variant={value[0] == null ? 'h6' : 'h5'}
           value={formatDate(value[0], translations.start)}
           selected={rangePosition === 'start'}
-          onClick={() => onRangePositionChange('start')}
+          onClick={() => setRangePosition('start')}
         />
         <Typography variant="h5">&nbsp;{'–'}&nbsp;</Typography>
         <PickersToolbarButton
           variant={value[1] == null ? 'h6' : 'h5'}
           value={formatDate(value[1], translations.end)}
           selected={rangePosition === 'end'}
-          onClick={() => onRangePositionChange('end')}
+          onClick={() => setRangePosition('end')}
         />
       </DateRangePickerToolbarContainer>
     </DateRangePickerToolbarRoot>

diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx
@@ -121,7 +121,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(
   const { ownerState } = usePickerPrivateContext();
   const { view, setView } = usePickerContext();
   const classes = useUtilityClasses(classesProp);
-  const { rangePosition, onRangePositionChange } = usePickerRangePositionContext();
+  const { rangePosition, setRangePosition } = usePickerRangePositionContext();
 
   const value = React.useMemo(
     () => (view == null ? null : viewToTab(view, rangePosition)),
@@ -152,9 +152,9 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(
 
   const handleRangePositionChange = useEventCallback((newTab: TabValue) => {
     if (newTab.includes('start')) {
-      onRangePositionChange('start');
+      setRangePosition('start');
     } else {
-      onRangePositionChange('end');
+      setRangePosition('end');
     }
   });
 

diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx
@@ -51,7 +51,7 @@ function DateTimeRangePickerTimeWrapper<
   const { viewRenderer, value, onChange, defaultValue, onViewChange, views, className, ...other } =
     props;
 
-  const { rangePosition, onRangePositionChange } = usePickerRangePositionContext();
+  const { rangePosition, setRangePosition } = usePickerRangePositionContext();
 
   if (!viewRenderer) {
     return null;
@@ -79,7 +79,7 @@ function DateTimeRangePickerTimeWrapper<
     // 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);
   };

diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
@@ -105,7 +105,7 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
   >();
   const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
-  const { rangePosition, onRangePositionChange } = usePickerRangePositionContext();
+  const { rangePosition, setRangePosition } = usePickerRangePositionContext();
   const classes = useUtilityClasses(classesProp);
 
   const commonToolbarProps = {
@@ -127,10 +127,10 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
         rangePosition,
         allowRangeFlip: true,
       });
-      onRangePositionChange(nextSelection);
+      setRangePosition(nextSelection);
       setValue(newRange, { changeImportance: 'set' });
     },
-    [setValue, onRangePositionChange, value, rangePosition, utils],
+    [setValue, setRangePosition, value, rangePosition, utils],
   );
 
   const startOverrides = React.useMemo(() => {
@@ -139,7 +139,7 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
         return;
       }
       if (rangePosition !== 'start') {
-        onRangePositionChange('start');
+        setRangePosition('start');
       }
       setView(newView);
     };
@@ -151,15 +151,15 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
       setView: handleStartRangeViewChange,
       view: rangePosition === 'start' ? view : null,
     };
-  }, [value, wrappedSetValue, rangePosition, view, onRangePositionChange, setView]);
+  }, [value, wrappedSetValue, rangePosition, view, setRangePosition, setView]);
 
   const endOverrides = React.useMemo(() => {
     const handleEndRangeViewChange = (newView: DateOrTimeViewWithMeridiem) => {
       if (newView === 'year' || newView === 'month') {
         return;
       }
       if (rangePosition !== 'end') {
-        onRangePositionChange('end');
+        setRangePosition('end');
       }
       setView(newView);
     };
@@ -171,7 +171,7 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
       setView: handleEndRangeViewChange,
       view: rangePosition === 'end' ? view : null,
     };
-  }, [value, wrappedSetValue, rangePosition, view, onRangePositionChange, setView]);
+  }, [value, wrappedSetValue, rangePosition, view, setRangePosition, setView]);
 
   if (hidden) {
     return null;

diff --git a/packages/x-date-pickers-pro/src/internals/hooks/models/index.ts b/packages/x-date-pickers-pro/src/internals/hooks/models/index.ts
@@ -2,7 +2,6 @@ export type {
   UseRangePickerSlots,
   UseRangePickerSlotProps,
   RangeOnlyPickerProps,
-  RangePickerAdditionalViewProps,
   UseRangePickerProps,
   UseRangePickerParams,
 } from './useRangePicker';
diff --git a/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts b/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts
@@ -14,7 +14,7 @@ import {
   ExportedPickersLayoutSlotProps,
 } from '@mui/x-date-pickers/PickersLayout';
 import { BaseRangeNonStaticPickerProps } from '../../models';
-import { UseRangePositionProps, UseRangePositionResponse } from '../useRangePosition';
+import { UseRangePositionProps } from '../useRangePosition';
 import { RangePickerFieldSlots, RangePickerFieldSlotProps } from '../useEnrichedRangePickerField';
 
 export interface UseRangePickerSlots
@@ -41,9 +41,6 @@ export interface UseRangePickerProps<
 > extends RangeOnlyPickerProps,
     BasePickerProps<PickerRangeValue, TView, TError, TExternalProps> {}
 
-export interface RangePickerAdditionalViewProps
-  extends Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {}
-
 export interface UseRangePickerParams<
   TView extends DateOrTimeViewWithMeridiem,
   TExternalProps extends UseRangePickerProps<TView, any, TExternalProps>,

diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerField.ts b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerField.ts
@@ -130,7 +130,7 @@ const useMultiInputFieldSlotProps = <
   disableOpenPicker,
   onBlur,
   rangePosition,
-  onRangePositionChange,
+  setRangePosition,
   localeText: inLocaleText,
   pickerSlotProps,
   pickerSlots,
@@ -177,7 +177,7 @@ const useMultiInputFieldSlotProps = <
 
   const openRangeStartSelection: React.UIEventHandler = (event) => {
     event.stopPropagation();
-    onRangePositionChange('start');
+    setRangePosition('start');
     if (!readOnly && !disableOpenPicker) {
       event.preventDefault();
       contextValue.setOpen(true);
@@ -186,7 +186,7 @@ const useMultiInputFieldSlotProps = <
 
   const openRangeEndSelection: React.UIEventHandler = (event) => {
     event.stopPropagation();
-    onRangePositionChange('end');
+    setRangePosition('end');
     if (!readOnly && !disableOpenPicker) {
       event.preventDefault();
       contextValue.setOpen(true);
@@ -195,7 +195,7 @@ const useMultiInputFieldSlotProps = <
 
   const handleFocusStart = () => {
     if (contextValue.open) {
-      onRangePositionChange('start');
+      setRangePosition('start');
       if (previousRangePosition.current !== 'start' && initialView) {
         contextValue.setView?.(initialView);
       }
@@ -204,7 +204,7 @@ const useMultiInputFieldSlotProps = <
 
   const handleFocusEnd = () => {
     if (contextValue.open) {
-      onRangePositionChange('end');
+      setRangePosition('end');
       if (previousRangePosition.current !== 'end' && initialView) {
         contextValue.setView?.(initialView);
       }
@@ -308,7 +308,7 @@ const useSingleInputFieldSlotProps = <
   label,
   onBlur,
   rangePosition,
-  onRangePositionChange,
+  setRangePosition,
   singleInputFieldRef,
   fieldProps,
   currentView,
@@ -357,7 +357,7 @@ const useSingleInputFieldSlotProps = <
       activeSectionIndex == null || activeSectionIndex < sections.length / 2 ? 'start' : 'end';
 
     if (domRangePosition != null && domRangePosition !== rangePosition) {
-      onRangePositionChange(domRangePosition);
+      setRangePosition(domRangePosition);
     }
   };
 

diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useRangePosition.ts b/packages/x-date-pickers-pro/src/internals/hooks/useRangePosition.ts
@@ -26,7 +26,7 @@ export interface UseRangePositionProps {
 
 export interface UseRangePositionResponse {
   rangePosition: RangePosition;
-  onRangePositionChange: (newPosition: RangePosition) => void;
+  setRangePosition: (newPosition: RangePosition) => void;
 }
 
 export const useRangePosition = (
@@ -58,5 +58,5 @@ export const useRangePosition = (
     syncRangePositionWithSingleInputField(newRangePosition);
   });
 
-  return { rangePosition, onRangePositionChange: handleRangePositionChange };
+  return { rangePosition, setRangePosition: handleRangePositionChange };
 };