[pickers] Always use props.value as the source of truth when defined

Author: flaviendelangle

packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx

@@ -27,7 +27,7 @@ import { PickerViewRoot } from '../internals/components/PickerViewRoot';
 import { useReduceAnimations } from '../internals/hooks/useReduceAnimations';
 import { DateCalendarClasses, getDateCalendarUtilityClass } from './dateCalendarClasses';
 import { BaseDateValidationProps } from '../internals/models/validation';
-import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
+import { useControlledValue } from '../internals/hooks/useControlledValue';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { VIEW_HEIGHT } from '../internals/constants/dimensions';
 import { PickerOwnerState, PickerValidDate } from '../models';
@@ -151,7 +151,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar(
     ...other
   } = props;
 
-  const { value, handleValueChange, timezone } = useControlledValueWithTimezone({
+  const { value, handleValueChange, timezone } = useControlledValue({
     name: 'DateCalendar',
     timezone: timezoneProp,
     value: valueProp,

packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx

@@ -18,7 +18,7 @@ import { DigitalClockOwnerState, DigitalClockProps } from './DigitalClock.types'
 import { useViews } from '../internals/hooks/useViews';
 import { PickerValidDate } from '../models';
 import { DIGITAL_CLOCK_VIEW_HEIGHT } from '../internals/constants/dimensions';
-import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
+import { useControlledValue } from '../internals/hooks/useControlledValue';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { useClockReferenceDate } from '../internals/hooks/useClockReferenceDate';
 import { getFocusedListItemIndex } from '../internals/utils/utils';
@@ -159,7 +159,7 @@ export const DigitalClock = React.forwardRef(function DigitalClock(
     value,
     handleValueChange: handleRawValueChange,
     timezone,
-  } = useControlledValueWithTimezone({
+  } = useControlledValue({
     name: 'DigitalClock',
     timezone: timezoneProp,
     value: valueProp,

packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx

@@ -18,7 +18,7 @@ import { applyDefaultDate, getMonthsInYear } from '../internals/utils/date-utils
 import { MonthCalendarProps } from './MonthCalendar.types';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
-import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
+import { useControlledValue } from '../internals/hooks/useControlledValue';
 import { DIALOG_WIDTH } from '../internals/constants/dimensions';
 import { PickerOwnerState, PickerValidDate } from '../models';
 import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext';
@@ -126,7 +126,7 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar(
     ...other
   } = props;
 
-  const { value, handleValueChange, timezone } = useControlledValueWithTimezone({
+  const { value, handleValueChange, timezone } = useControlledValue({
     name: 'MonthCalendar',
     timezone: timezoneProp,
     value: valueProp,

packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx

@@ -25,7 +25,7 @@ import {
 import { getHourSectionOptions, getTimeSectionOptions } from './MultiSectionDigitalClock.utils';
 import { PickerOwnerState, PickerValidDate, TimeStepOptions, TimeView } from '../models';
 import { TimeViewWithMeridiem } from '../internals/models';
-import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
+import { useControlledValue } from '../internals/hooks/useControlledValue';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { useClockReferenceDate } from '../internals/hooks/useClockReferenceDate';
 import { formatMeridiem } from '../internals/utils/date-utils';
@@ -112,7 +112,7 @@ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDi
     value,
     handleValueChange: handleRawValueChange,
     timezone,
-  } = useControlledValueWithTimezone({
+  } = useControlledValue({
     name: 'MultiSectionDigitalClock',
     timezone: timezoneProp,
     value: valueProp,

packages/x-date-pickers/src/TimeClock/TimeClock.tsx

@@ -17,7 +17,7 @@ import { getTimeClockUtilityClass, TimeClockClasses } from './timeClockClasses';
 import { Clock, ClockProps } from './Clock';
 import { TimeClockProps } from './TimeClock.types';
 import { getHourNumbers, getMinutesNumbers } from './ClockNumbers';
-import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
+import { useControlledValue } from '../internals/hooks/useControlledValue';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { useClockReferenceDate } from '../internals/hooks/useClockReferenceDate';
 import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext';
@@ -110,7 +110,7 @@ export const TimeClock = React.forwardRef(function TimeClock(
     ...other
   } = props;
 
-  const { value, handleValueChange, timezone } = useControlledValueWithTimezone({
+  const { value, handleValueChange, timezone } = useControlledValue({
     name: 'TimeClock',
     timezone: timezoneProp,
     value: valueProp,

packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx

@@ -19,7 +19,7 @@ import { applyDefaultDate } from '../internals/utils/date-utils';
 import { YearCalendarProps } from './YearCalendar.types';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
-import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
+import { useControlledValue } from '../internals/hooks/useControlledValue';
 import { DIALOG_WIDTH, MAX_CALENDAR_HEIGHT } from '../internals/constants/dimensions';
 import { PickerOwnerState, PickerValidDate } from '../models';
 import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext';
@@ -140,7 +140,7 @@ export const YearCalendar = React.forwardRef(function YearCalendar(
     ...other
   } = props;
 
-  const { value, handleValueChange, timezone } = useControlledValueWithTimezone({
+  const { value, handleValueChange, timezone } = useControlledValue({
     name: 'YearCalendar',
     timezone: timezoneProp,
     value: valueProp,

packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.test.tsx renamed to packages/x-date-pickers/src/internals/hooks/useControlledValue.test.tsx

@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import { screen } from '@mui/internal-test-utils';
 import { PickersTimezone, PickerValidDate } from '@mui/x-date-pickers/models';
 import { createPickerRenderer } from 'test/utils/pickers';
-import { useValueWithTimezone } from './useValueWithTimezone';
+import { useControlledValue } from './useControlledValue';
 import { singleItemValueManager } from '../utils/valueManagers';
 
 describe('useValueWithTimezone', () => {
@@ -22,10 +22,11 @@ describe('useValueWithTimezone', () => {
     const { expectedTimezone, ...other } = params;
 
     function TestComponent(props: typeof other) {
-      const { timezone } = useValueWithTimezone({
+      const { timezone } = useControlledValue({
+        name: 'test',
         ...props,
         valueManager: singleItemValueManager,
-        onChange: () => {},
+        onChange: undefined,
       });
 
       return <div data-testid="result">{timezone}</div>;

packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.ts renamed to packages/x-date-pickers/src/internals/hooks/useControlledValue.ts

@@ -7,29 +7,34 @@ import { PickersTimezone, PickerValidDate } from '../../models';
 import { PickerValidValue } from '../models';
 
 /**
- * Hooks making sure that:
+ * Hooks controlling the value while making sure that:
  * - The value returned by `onChange` always have the timezone of `props.value` or `props.defaultValue` if defined
  * - The value rendered is always the one from `props.timezone` if defined
  */
-export const useValueWithTimezone = <
+export const useControlledValue = <
   TValue extends PickerValidValue,
   TChange extends (...params: any[]) => void,
 >({
+  name,
   timezone: timezoneProp,
   value: valueProp,
   defaultValue,
   referenceDate,
-  onChange,
+  onChange: onChangeProp,
   valueManager,
-}: UseValueWithTimezoneParameters<TValue, TChange>) => {
+}: UseControlledValueWithTimezoneParameters<TValue, TChange>) => {
   const utils = useUtils();
 
-  const firstDefaultValue = React.useRef(defaultValue);
-  const inputValue = valueProp ?? firstDefaultValue.current ?? valueManager.emptyValue;
+  const [valueWithInputTimezone, setValue] = useControlled({
+    name,
+    state: 'value',
+    controlled: valueProp,
+    default: defaultValue ?? valueManager.emptyValue,
+  });
 
   const inputTimezone = React.useMemo(
-    () => valueManager.getTimezone(utils, inputValue),
-    [utils, valueManager, inputValue],
+    () => valueManager.getTimezone(utils, valueWithInputTimezone),
+    [utils, valueManager, valueWithInputTimezone],
   );
 
   const setInputTimezone = useEventCallback((newValue: TValue) => {
@@ -40,65 +45,35 @@ export const useValueWithTimezone = <
     return valueManager.setTimezone(utils, inputTimezone, newValue);
   });
 
-  let timezoneToRender: PickersTimezone;
-  if (timezoneProp) {
-    timezoneToRender = timezoneProp;
-  } else if (inputTimezone) {
-    timezoneToRender = inputTimezone;
-  } else if (referenceDate) {
-    timezoneToRender = utils.getTimezone(referenceDate);
-  } else {
-    timezoneToRender = 'default';
-  }
+  const timezoneToRender = React.useMemo(() => {
+    if (timezoneProp) {
+      return timezoneProp;
+    }
+    if (inputTimezone) {
+      return inputTimezone;
+    }
+    if (referenceDate) {
+      return utils.getTimezone(referenceDate);
+    }
+    return 'default';
+  }, [timezoneProp, inputTimezone, referenceDate, utils]);
 
   const valueWithTimezoneToRender = React.useMemo(
-    () => valueManager.setTimezone(utils, timezoneToRender, inputValue),
-    [valueManager, utils, timezoneToRender, inputValue],
+    () => valueManager.setTimezone(utils, timezoneToRender, valueWithInputTimezone),
+    [valueManager, utils, timezoneToRender, valueWithInputTimezone],
   );
 
   const handleValueChange = useEventCallback((newValue: TValue, ...otherParams: any[]) => {
     const newValueWithInputTimezone = setInputTimezone(newValue);
-    onChange?.(newValueWithInputTimezone, ...otherParams);
+    setValue(newValueWithInputTimezone);
+    onChangeProp?.(newValueWithInputTimezone, ...otherParams);
   }) as TChange;
 
-  return { value: valueWithTimezoneToRender, handleValueChange, timezone: timezoneToRender };
-};
-
-/**
- * Wrapper around `useControlled` and `useValueWithTimezone`
- */
-export const useControlledValueWithTimezone = <
-  TValue extends PickerValidValue,
-  TChange extends (...params: any[]) => void,
->({
-  name,
-  timezone: timezoneProp,
-  value: valueProp,
-  defaultValue,
-  referenceDate,
-  onChange: onChangeProp,
-  valueManager,
-}: UseControlledValueWithTimezoneParameters<TValue, TChange>) => {
-  const [valueWithInputTimezone, setValue] = useControlled({
-    name,
-    state: 'value',
-    controlled: valueProp,
-    default: defaultValue ?? valueManager.emptyValue,
-  });
-
-  const onChange = useEventCallback((newValue: TValue, ...otherParams: any[]) => {
-    setValue(newValue);
-    onChangeProp?.(newValue, ...otherParams);
-  }) as TChange;
-
-  return useValueWithTimezone({
-    timezone: timezoneProp,
-    value: valueWithInputTimezone,
-    defaultValue: undefined,
-    referenceDate,
-    onChange,
-    valueManager,
-  });
+  return {
+    value: valueWithTimezoneToRender,
+    handleValueChange,
+    timezone: timezoneToRender,
+  };
 };
 
 interface UseValueWithTimezoneParameters<

packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts

@@ -29,7 +29,7 @@ import {
   InferError,
   InferFieldSection,
 } from '../../../models';
-import { useControlledValueWithTimezone } from '../useValueWithTimezone';
+import { useControlledValue } from '../useControlledValue';
 import {
   GetDefaultReferenceDateProps,
   getSectionTypeGranularity,
@@ -110,7 +110,7 @@ export const useFieldState = <
     },
   } = params;
 
-  const { value, handleValueChange, timezone } = useControlledValueWithTimezone({
+  const { value, handleValueChange, timezone } = useControlledValue({
     name: 'a field component',
     timezone: timezoneProp,
     value: valueProp,

packages/x-date-pickers/src/internals/hooks/usePicker/hooks/useValueAndOpenStates.ts

@@ -3,7 +3,7 @@ import { warnOnce } from '@mui/x-internals/warning';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { DateOrTimeViewWithMeridiem, PickerValidValue, PickerValueManager } from '../../../models';
 import { PickerSelectionState, UsePickerProps, UsePickerState } from '../usePicker.types';
-import { useValueWithTimezone } from '../../useValueWithTimezone';
+import { useControlledValue } from '../../useControlledValue';
 import { useUtils } from '../../useUtils';
 import { InferError, PickerChangeHandlerContext } from '../../../../models';
 import { SetValueActionOptions } from '../../../components/PickerProvider';
@@ -82,7 +82,8 @@ export function useValueAndOpenStates<
     timezone,
     value: valuePropWithTimezoneToRender,
     handleValueChange,
-  } = useValueWithTimezone({
+  } = useControlledValue({
+    name: 'a picker component',
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,

packages/x-date-pickers/src/internals/index.ts

@@ -62,7 +62,7 @@ export { PickersToolbarButton } from './components/PickersToolbarButton';
 
 export { DAY_MARGIN, DIALOG_WIDTH, VIEW_HEIGHT } from './constants/dimensions';
 
-export { useControlledValueWithTimezone } from './hooks/useValueWithTimezone';
+export { useControlledValue as useControlledValueWithTimezone } from './hooks/useControlledValue';
 export type { DesktopOnlyPickerProps } from './hooks/useDesktopPicker';
 export {
   useField,